Sự khác biệt giữa DOM và bóng mờ DOM của Polymer là gì?

Question

Tôi đang gặp sự cố khi sử dụng shadow DOM cho một trong các thành phần web (giấy-bước) và nó yêu cầu sử dụng DOM mờ ám. Tôi không chắc sự khác biệt là gì và tại sao lại như thế.

Answer 1

Here's giải thích lý do tại sao.

Tl; DR:

DOM bóng:

DOM bóng hoạt động bằng cách giấu cây DOM scoped từ chức năng cây đi bộ truyền thống và bộ truy xuất (childNodes, trẻ em, firstChild và do đó trên). Những người truy cập này chỉ trả về các phần tử trong phạm vi của bạn.

Điều này có nghĩa là nó ẩn một lớp phức tạp từ bạn. Một trong những ví dụ tôi tìm thấy trực tuyến là về thẻ <video></video>. Nó giải thích làm thế nào bên trong nó có các điều khiển video, nhưng những điều đó được trừu tượng hóa và bạn không thể nhìn thấy chúng. Đây là những gì mà Shadow DOM thực hiện, nhưng đối với tất cả các thành phần web.

DOM bóng có vẻ tốt đẹp, nhưng có những hạn chế

• Đó là rất nhiều mã.
• Tất cả API DOM gián tiếp chậm.
• Các cấu trúc như NodeList có thể không được mô phỏng đơn giản.
• Có một số người truy cập nhất định không thể ghi đè (ví dụ: window.document, window.document.body).
• Các polyfill trả về các đối tượng không thực sự là nút, nhưng Node proxy, có thể rất khó hiểu.

Đây là nơi DOM râm đi kèm trong

Shady DOM:.

Shady DOM là một shim siêu nhanh cho DOM bóng cung cấp cây Phạm vi, nhưng có nhược điểm . Quan trọng nhất, người ta phải sử dụng các API DOM mờ ám để làm việc với cây có phạm vi.

Bằng cách sử dụng Shady DOM, bạn hiện không có chế độ xem tóm tắt về các thành phần. Bạn có thể thấy mọi thứ. Tuy nhiên với Shady DOM, bạn có thể kiểm tra như thế nào cây sẽ trông như thế nào nếu bóng DOM đã được sử dụng thay vì bằng cách chạy này:

var arrayOfNodes = Polymer.dom(YOUR_SELECTOR_GOES_HERE).children; 

Vì vậy, tham gia tất cả thông tin này vào xem xét về cách DOMs công việc khác nhau, nó có vẻ như thành phần web-stepper giấy yêu cầu quyền truy cập vào toàn bộ cây để hoạt động chính xác. Vì Shadow DOM tóm tắt các phần tử bên trong, bạn phải sử dụng Shady DOM hoặc cấu trúc lại mã theo cách mà các phần tử bên trong không cần phải được truy cập từ bên ngoài trừu tượng.