Tôi nghe nói về bóng DOM có vẻ như giải quyết vấn đề đóng gói trong phát triển tiện ích web. Các quy tắc DOM và CSS được gói gọn để bảo trì. Nhưng sau đó không phải là những gì iframes là cho? Có vấn đề gì với iframe khiến W3C cần thiết để đưa ra Shadow DOM hoặc HTML5 Web Components?Tại sao lại là Shadow DOM khi chúng ta có iframe?
Trả lời
iframe là sử dụng như các đối tượng đóng gói chỉ ...
với ngoại lệ của SVG (thêm về điều này sau), ngày nay nền tảng Web chỉ cung cấp một cơ chế tích hợp để cô lập một đoạn mã từ người khác - và điều đó không đẹp. Yup, tôi đang nói về iframe. Đối với nhu cầu đóng gói nhất, khung hình quá nặng và hạn chế.
Shadow DOM cho phép bạn cung cấp gói gọn hơn và dễ dàng hơn bằng cách tạo bản sao khác của DOM hoặc một phần của nó.
Ví dụ: hãy tưởng tượng bạn xây dựng một tiện ích (như tôi có) được sử dụng trên các trang web. Bạn Widget có thể bị ảnh hưởng bởi css trên trang và tìm kiếm khủng khiếp, trong khi với DOM bóng nó sẽ không :)
Dưới đây là một bài viết xuất sắc về chủ đề này:
chúng ta có thể có nhiều phiên bản của cùng một widget trong các shadow-doms khác nhau không? Ví dụ: - CSS/JS/HTML sẽ giống nhau nhưng chỉ đến nguồn dữ liệu/API khác – udarakr
Hôm qua, iframe thường được sử dụng để đảm bảo phạm vi và kiểu dáng riêng biệt. Ví dụ bao gồm bản đồ của Google và video trên YouTube.
Tuy nhiên, iframe được thiết kế để nhúng tài liệu đầy đủ khác trong tài liệu HTML hiện tại. Điều này có nghĩa là việc truy cập các giá trị trong một phần tử DOM đã cho trong khung nội tuyến từ tài liệu gốc là một rắc rối do thiết kế. Các phần tử DOM nằm trong một ngữ cảnh hoàn toàn riêng biệt, vì vậy bạn cần phải duyệt qua DOM của khung nội tuyến để truy cập các giá trị bạn đang tìm kiếm. Tương phản điều này với các thành phần web cung cấp một cách thanh lịch để lộ một API sạch để truy cập các giá trị của các phần tử tùy chỉnh.
Hãy tưởng tượng tạo trang bằng cách sử dụng một bộ gồm 5 iframe mà mỗi khung chứa một thành phần. Mỗi thành phần sẽ cần một URL riêng để lưu trữ nội dung của iframe. Kết quả đánh dấu sẽ được rải rác bằng các thẻ khung nội tuyến, mang lại khả năng đánh dấu với ý nghĩa ngữ nghĩa thấp mà cũng rất khó đọc và quản lý. Ngược lại, các thành phần web hỗ trợ khai báo các thẻ ngữ nghĩa phong phú cho mỗi thành phần. Các thẻ này hoạt động như công dân hạng nhất trong HTML. Điều này hỗ trợ người đọc (nói cách khác, các nhà phát triển bảo trì).
Tóm lại, trong khi cả iframe và bóng DOM cung cấp đóng gói, chỉ DOM bóng được thiết kế để sử dụng với các thành phần web và do đó tránh sự phân tách quá mức, thiết lập phí và đánh dấu clunky xảy ra với iframe.
'
Gói gọn hơn theo cách nào? Những điều iframes cấm các shadow DOM đó cho phép? –
'