Gốc bóng là gì

99

Trong Công cụ dành cho nhà phát triển của Google Chrome, tôi thấy thẻ #shadow-rootbên phải <html lang="en">. nó làm gì và nó được sử dụng để làm gì? Tôi không thấy nó trong Firefox cũng như IE; chỉ trong Chrome, đây có phải là một tính năng đặc biệt?

Nếu tôi mở nó, nó sẽ hiển thị <head>và <body>một liên kết bên cạnh có tên reveal, bằng cách nhấp vào, nó trỏ đến <head>và <body>, không có gì khác.

— Andrew
nguồn

97

Đây là một chỉ báo đặc biệt cho thấy Shadow DOM tồn tại. Những thứ này đã tồn tại trong nhiều năm, nhưng các nhà phát triển chưa bao giờ được cấp API cho nó cho đến gần đây. Chrome đã có chức năng này một thời gian, các trình duyệt khác vẫn đang bắt kịp. Nó có thể được chuyển đổi trong Cài đặt DevTools trong phần "Phần tử". Bỏ chọn "Hiển thị DOM Shadow Tác nhân Người dùng". Điều này ít nhất sẽ ẩn bất kỳ Shadow DOM nào được tạo bên trong (như các phần tử được chọn.) Tôi không chắc ngay liệu nó có ảnh hưởng đến những cái do người dùng tạo hay không, chẳng hạn như các phần tử tùy chỉnh.

Những thứ này cũng xuất hiện trong những thứ như iframe, nơi bạn có một cây DOM riêng biệt được lồng bên trong một cây khác.

Shadow DOM chỉ đơn giản nói rằng một số phần của trang, có DOM riêng bên trong nó. Kiểu và tập lệnh có thể được xác định phạm vi trong phần tử đó nên những gì chạy trong nó chỉ thực thi trong ranh giới đó.

Đây là một trong những phần chính cần thiết để Thành phần Web hoạt động. Đây là một công nghệ mới cho phép các nhà phát triển xây dựng các thành phần đóng gói của riêng họ mà các nhà phát triển có thể sử dụng giống như bất kỳ phần tử HTML nào khác.

— Garbee
nguồn

Vì vậy, đó là một câu hỏi hiển nhiên rằng làm thế nào để sử dụng các phần tử tùy chỉnh đã tạo đó hoặc các thành phần web cho bất kỳ dự án nào? Hãy nói rằng tôi đang sử dụng Polymer ...

— Kushal Jayswal

62

Ví dụ về Shadow DOM, khi bạn có một <video>thẻ trên một trang web, thẻ đó chỉ được hiển thị dưới dạng một thẻ trong DOM chính, nhưng nếu bạn bật Shadow DOM, bạn sẽ có thể thấy HTML của trình phát video (DOM của trình phát).

Điều này được giải thích một cách khéo léo trong bài viết này, http://webcomponents.org/articles/introduction-to-shadow-dom/

— Nagendra Rao
nguồn

Tôi nhận được cảnh báo bảo mật từ Firefox khi truy cập liên kết webcomponents.org, một số loại vấn đề về chứng chỉ.

— Sebastian Norr

1

Vâng, có vẻ như chứng chỉ ssl của họ cần được gia hạn. Bạn vẫn có thể xem trang web bằng cách bỏ qua cảnh báo.

— Nagendra Rao,

5

Trong trường hợp của các thành phần web, có một vấn đề cơ bản khiến các tiện ích con được xây dựng từ HTML và JavaScript khó sử dụng.

Vấn đề : Cây DOM bên trong tiện ích con không được gói gọn trong phần còn lại của trang. Việc thiếu tính đóng gói này có nghĩa là biểu định kiểu tài liệu của bạn có thể vô tình áp dụng cho các phần bên trong tiện ích con; JavaScript của bạn có thể vô tình sửa đổi các phần bên trong tiện ích con; ID của bạn có thể trùng lặp với ID bên trong tiện ích con, v.v.

Shadow DOM giải quyết vấn đề đóng gói cây DOM .

Ví dụ: nếu bạn có đánh dấu như thế này:

<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

sau đó thay vì

Hello, world!

trang của bạn trông như thế nào

こんにちは、影の世界!

Không chỉ vậy, nếu JavaScript trên trang hỏi textContent của nút là gì, nó sẽ không nhận được “こんにちは、影の世界!”, mà là “Hello, world!” do cây con DOM dưới gốc bóng tối được đóng gói .

LƯU Ý : Tôi đã chọn nội dung ở trên từ https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ vì nó đã giúp tôi hiểu về Shadow DOM tốt hơn một chút so với các câu trả lời đã có ở đây. Tôi đã thêm nội dung có liên quan ở đây để nó giúp ích cho những người khác nhưng hãy xem liên kết để thảo luận chi tiết về cùng một.

— Aniket Thakur
nguồn