DOM tối là một chủ đề khó giải thích. Điều này khá phức tạp. Công cụ này giới thiệu các khái niệm lạ mà chúng tôi không quen thuộc 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 máy chủ lưu trữ, nút được phân phối, v.v.
Về mặt lý thuyết, một điều đáng lo ngại về DOM bóng là cách sản phẩm cuối cùng (DOM) của bạn được trình duyệt hiển thị. Các nút từ nút máy chủ được dịch chuyển 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 vẫn nằm trong nút máy chủ. Kỳ lạ! Vì vậy, tại thời điểm kết xuất, chúng xuất hiện như một phần của cây bóng chứ không phải máy chủ lưu trữ ban đầu. Cách quá trình kết xuất này diễn ra là một trong những phần khó hiểu nhất của DOM bóng.
Vài ngày trước, tôi đã phát hành một công cụ có tên là Shadow DOM Visualizer mà tôi đang xây dựng để giúp rút ngắn thời gian tìm hiểu.
Công cụ này cho phép bạn xem theo cách trực quan cách DOM bóng kết xuất trong trình duyệt, một tính năng Công cụ cho nhà phát triển hiện nay còn thiếu. Cả hai khối mã màu đen ở bên trái đều có thể chỉnh sửa. 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. Thật tuyệt vời cho d3.js! Nút màu xanh dương đang đến từ nút máy chủ. Các nút màu vàng đến từ DOM bóng. Điểm chèn <content> là cầu nối giữa hai thế giới. Vì chúng có tính logic về mặt logic trong DOM tối, nên chúng có màu vàng. Đường viền màu xanh dương cho biết họ mời các nút máy chủ màu xanh dương vào bên hiển thị.
Shadow DOM có trong Chrome 25 và phần tử <template> có trong Chrome 26 (mặc dù bạn chỉ cần người đầu tiên dùng thử bản minh hoạ).