Shadow DOM là một chủ đề khó hiểu. Nó chỉ phức tạp. Công nghệ này giới thiệu các khái niệm không quen thuộc mà chúng ta không quen dùng trên web. Ranh giới bóng, phạm vi tạo kiểu, nhắm mục tiêu lại sự kiện, điểm chèn, điểm chèn bóng, nút lưu trữ, nút phân phối,...và còn nhiều thuật ngữ khác.
Một điều khó hiểu về Shadow DOM là cách trình duyệt hiển thị sản phẩm cuối cùng (DOM). Các nút từ nút lưu trữ được chuyển đổi một cách kỳ diệu vào các điểm chèn của ShadowRoot, nhưng về mặt logic, vẫn còn trong nút lưu trữ. Kỳ lạ! Vì vậy, tại thời điểm kết xuất, các đối tượng này sẽ xuất hiện trong cây bóng chứ không phải máy chủ lưu trữ ban đầu. Cách kết xuất này diễn ra là một trong những phần khó hiểu nhất của Shadow DOM.
Vài ngày trước, tôi đã phát hành một công cụ mà tôi đang phát triển có tên là Shadow DOM Visualizer (Trình trực quan hoá Shadow DOM) để giúp giảm độ dốc của quá trình học.
Tính năng này cho phép bạn xem trực quan cách Shadow DOM hiển thị trong trình duyệt, một tính năng mà DevTools hiện thiếu. Bạn có thể chỉnh sửa cả hai khối mã màu đen ở bên trái. Hãy thử thay đổi các điểm chèn <content>, xoá hoặc thêm các điểm chèn mới để xem cây kết hợp (hiển thị) bị ảnh hưởng như thế nào ở bên phải.
Di chuột qua các nút trong biểu đồ để làm nổi bật mã đánh dấu có liên quan ở bên trái. Chúc mừng d3.js! Các nút màu xanh dương đến từ nút máy chủ. Các nút màu vàng đến từ Shadow DOM. Điểm chèn <content> là cầu nối giữa hai thế giới. Vì nằm trong Shadow DOM theo logic, nên các phần tử này có màu vàng. Đường viền màu xanh dương cho biết các nút máy chủ lưu trữ màu xanh dương được mời tham gia nhóm kết xuất.
Shadow DOM có trong Chrome 25 và phần tử <template> có trong Chrome 26 (mặc dù bạn chỉ cần phiên bản đầu tiên để thử bản minh hoạ).