Sự khác biệt giữa chế độ đóng gói DOM đóng mở và đóng là gì?

Question

Tôi muốn tạo một DOM bóng cho một phần tử để tôi có thể hiển thị các phần tử cho tiện ích mở rộng của Chrome mà không có kiểu trang ảnh hưởng đến chúng.

Khi tôi xem tài liệu cho Element.createShadowRoot Tôi thấy nó không được chấp nhận nên tôi đã kiểm tra Element.attachShadow. Nó nói rằng tôi đã phải cung cấp một chế độ đóng gói nhưng không giải thích những gì các chế độ khác nhau làm. Tôi đã tìm kiếm một chút nhưng tôi không thể tìm thấy bất cứ điều gì rõ ràng giải thích sự khác biệt là gì.

Sự khác biệt giữa các chế độ và loại nào tôi nên sử dụng cho những gì tôi đang cố gắng đạt được?

Answer 1

Với chế độ open, bạn có thể truy cập Shadow DOM qua thuộc tính shadowRoot của phần tử HTML.

Với chế độ closed bạn không thể. shadowRoot sẽ trả lại null.

Bạn có thể sử dụng cả hai chế độ để bạn muốn đạt được.

Đây là detailed explanation of the differences.

Answer 2

Để thêm vào câu trả lời được chấp nhận. Chế độ đóng của Shadow DOM có lợi ích duy nhất là cung cấp cho các tác giả Thành phần Web với sự linh hoạt để quyết định cách thức (nếu có) để hiển thị Shadow Root của thành phần. Tuy nhiên, nó vô cùng dễ dàng để phá vỡ bất kỳ nỗ lực một tác giả thành phần làm cho ẩn Shadow Root vì vậy nó có lẽ không đáng làm phiền. See Open vs. Closed Shadow DOM để có giải thích chi tiết hơn.