Shadow DOM là gì?

Tại sao Ranh giới Thành phần Quan trọng

Shadow DOM ảnh hưởng đến cách các trình duyệt hiển thị trạng thái, kết xuất nội dung, hoặc quyết định khi nào một hành động tự động là an toàn. Một định nghĩa chính xác ngăn các nhóm không coi một tín hiệu hẹp như một câu trả lời phổ quát. Nó cũng làm cho việc chẩn đoán lỗi kiểm tra dễ dàng hơn vì hành vi dự kiến của trình duyệt được gắn liền với một vòng đời, API, hoặc ranh giới hệ thống đã được tài liệu hóa.

Đối với tự động hóa web, câu hỏi thực tiễn luôn hẹp hơn "liệu trang đã sẵn sàng?" hay "liệu trình duyệt có trông thật không?" Bước tiếp theo có thể cần một điều khiển được bật, một khung hoàn thành việc điều hướng, một thành phần gắn kết cây nội bộ của nó, hoặc một bề mặt kết xuất để duy trì sự nhất quán. Các phần dưới đây biến khái niệm này thành các kiểm tra có thể quan sát được thay vì dựa vào truyền thuyết.

Định nghĩa Shadow DOM

Shadow DOM là một cơ chế của nền tảng web cho phép một phần tử lưu trữ một cây DOM riêng biệt với kiểu dáng được giới hạn và các chi tiết triển khai được đóng gói. Phần tử chủ vẫn ở trong cây thông thường của tài liệu, thường được gọi là DOM nhẹ. Cây đi kèm bắt đầu từ một ShadowRoot và chứa các phần tử nội bộ của thành phần.

The Hướng dẫn Shadow DOM của MDN mô tả máy chủ, cây bóng, ranh giới bóng và gốc bóng. Các trình duyệt từ lâu đã sử dụng cây nội bộ cho các điều khiển như các phần tử đa phương tiện. Các API web-components cung cấp một mô hình bao bọc liên quan cho các tác giả trang web.

Bóng không có nghĩa là vô hình. Các nút nội bộ có thể hiển thị trên màn hình, nhận sự kiện, chứa văn bản có thể truy cập và tham gia vào bố cục. Ranh giới thay đổi cách mà các bộ chọn, quy tắc kiểu, đường dẫn sự kiện, và quyền truy cập DOM hoạt động. Đây là một ranh giới kỹ thuật, không phải là một đảm bảo rằng thông tin là bí mật.

Các máy chủ, Gốc, và Cây

Một shadow host là phần tử thông thường mà shadow root được gắn vào. ShadowRoot là một đoạn tài liệu mà neo cây nội bộ. Các thành phần có thể tạo ra một root mở, cái mà được trả về bởi thuộc tính shadowRoot của host, hoặc một root đóng, mà thuộc tính đó trả về null cho mã bên ngoài.

Mở và đóng là sự lựa chọn truy cập API, không phải là ranh giới bảo mật. Mã tạo ra một root đóng có thể giữ tham chiếu của nó, và các công cụ gỡ lỗi trình duyệt có thể tiết lộ cấu trúc nội bộ. Dữ liệu nhạy cảm không nên được đặt trong một thành phần với giả định rằng chế độ đóng làm cho nó được bảo mật.

Bản Mô hình cây bóng chuẩn WHATWG DOM định nghĩa các gốc cây, mối quan hệ chủ, đường dẫn sự kiện và hành vi nhắm lại. Những quy tắc này giải thích lý do tại sao một sự kiện phát sinh từ một nút trong nội bộ có thể được quan sát bên ngoài thành phần với mục tiêu nhắm lại vào chủ.

Bảo vệ phong cách

Các bộ chọn thông thường từ tài liệu không thể truy cập vào các phần bên trong bóng. Một thành phần có thể định nghĩa các tên lớp nội bộ mà không bị xung đột với các lớp trang không liên quan. Các quy tắc kiểu nội bộ cũng được giới hạn trong cây bóng, điều này ngăn chặn một thành phần có thể tái định dạng tài liệu xung quanh một cách tình cờ.

Biên giới không phải là sự cách ly tuyệt đối. Các thuộc tính được kế thừa như màu sắc và phông chữ có thể chảy từ host. Các thành phần có thể tiết lộ các móc phong cách có chủ ý thông qua các thuộc tính và phần tùy chỉnh. Các lớp giả và các phần tử giả cung cấp cho tác giả và người tiêu dùng thành phần những cách kiểm soát để phối hợp phong cách mà không cần tiết lộ mọi bộ chọn nội bộ.

Mô hình này cải thiện khả năng duy trì nhưng có thể gây ngạc nhiên cho mã kiểm tra. Một bộ chọn đã hoạt động trước khi di chuyển thành phần có thể ngừng tìm thấy cùng một điều khiển nhìn thấy được vì điều khiển đã di chuyển vào phía sau một gốc bóng. Cách sửa là chọn chủ, nhập cây bóng hỗ trợ và sau đó xác định điều khiển nội bộ, hoặc sử dụng một bộ tìm kiếm tự động rõ ràng hỗ trợ quá trình đi qua bóng.

Slots và Cây Đã Tạo Thành

Một slot đánh dấu vị trí mà các phần tử con trong light-DOM nên xuất hiện bên trong cấu trúc được kết xuất của thành phần. Node được cung cấp vẫn là một phần tử con của host trong light DOM. Việc gán slot thay đổi vị trí của nó trong cây kết xuất đã được cấu thành, đó là cấu trúc mà người dùng nhìn thấy sau khi cây light và cây shadow được kết hợp.

Các slot đã đặt cho phép một thành phần đặt các loại nội dung khác nhau, chẳng hạn như tiêu đề, biểu tượng và khu vực hành động. Một slot mặc định nhận các nút mà không có tên slot tương ứng. Các thành phần có thể cung cấp nội dung dự phòng xuất hiện khi không có nút nào được chỉ định.

Tự động hóa phải phân biệt quyền sở hữu từ vị trí hình ảnh. Một nút có khe có thể được tìm thấy như là một đứa trẻ của light-DOM mặc dù nó xuất hiện bên trong thành phần. Một nút bóng nội bộ yêu cầu đi qua bóng. Kiểm tra DOM trực tiếp và các phân bổ khe ngăn chặn các bộ chọn sâu không cần thiết.

Shadow DOM và Các Phần Tử Tùy Chỉnh

Các phần tử tùy chỉnh và Shadow DOM là bổ sung cho nhau nhưng độc lập. The Tài liệu đặc tả phần tử tùy chỉnh HTML định nghĩa cách các tác giả đăng ký tên phần tử mới và các callback vòng đời. Một phần tử tùy chỉnh có thể gắn một gốc bóng, chỉ hiển thị DOM nhẹ, hoặc kết hợp cả hai cách tiếp cận.

Thời gian vòng đời là quan trọng. Một host có thể tồn tại trong tài liệu đã phân tích trước khi định nghĩa phần tử tùy chỉnh của nó tải và trước khi cây bóng của nó được đính kèm. Tự động hóa tìm kiếm nội dung bên trong ngay lập tức có thể chạy quá sớm. Hãy đợi thành phần được định nghĩa, cho cây bóng tồn tại nơi mở, và cho trạng thái mục tiêu bên trong nó.

Shadow DOM khai báo cho phép các trình duyệt tương thích phân tích một mẫu thành một cây bóng mà không cần chờ quá trình xây dựng phía khách hàng. Nó hỗ trợ nội bộ thành phần được render từ server và có thể cải thiện lần render đầu tiên. Mã thử nghiệm vẫn nên nhắm đến hợp đồng thành phần cuối cùng thay vì giả định rằng cây gốc được tạo ra một cách khai báo hay mệnh lệnh.

Tự động hóa đáng tin cậy qua ranh giới bóng

Ưu tiên vai trò, nhãn, tên và hợp đồng cấp thành phần hơn là các chuỗi lớp nội bộ dễ vỡ. Nhiều thư viện tự động hóa có thể xuyên phá các cây bóng mở cho các chiến lược định vị được hỗ trợ, nhưng hành vi có sự khác biệt. Tài liệu có ghi lại việc một bộ chọn vượt qua ranh giới bóng hay không và tránh giả định rằng một bộ chọn CSS đơn giản là toàn cầu đệ quy.

Cây gốc đóng yêu cầu một chiến lược khác. Sử dụng giao diện thành phần công cộng, các ngữ nghĩa có thể truy cập, điều khiển light-DOM, hoặc hợp tác từ nhóm ứng dụng. Việc tiêm các bản vá để buộc mọi cây gốc mở sẽ thay đổi ứng dụng đang thử nghiệm và có thể che giấu các vấn đề tích hợp thực sự. Xem xét các nội bộ đóng như một chi tiết thực hiện trừ khi bài thử nghiệm có lý do chẩn đoán rõ ràng để kiểm tra chúng.

Đối với việc gỡ lỗi, hãy ghi lại bộ chọn host, chế độ gốc, trạng thái định nghĩa thành phần, các slot liên quan, và tên có thể truy cập của mục tiêu. Kiểm tra xem một sự kiện có được định vị lại tại ranh giới hay không. Nếu một cú nhấp chuột thất bại, hãy xác minh tính khả dụng, thử nghiệm va chạm, lớp phủ và trạng thái thành phần thay vì chỉ thêm các bộ chọn sâu hơn.

Lựa chọn một hợp đồng thành phần ổn định

Bắt đầu với điều kiện hoặc cấu hình nhỏ nhất chứng minh rằng nhiệm vụ có thể tiếp tục. Bảo tồn hành vi trình duyệt tương thích tiêu chuẩn, sau đó chỉ thêm các điều khiển hồ sơ nơi quy trình làm việc yêu cầu chúng. Ghi lại bản dựng trình duyệt và trạng thái liên quan để sau này có thể giải thích các sự khác biệt. Một quan sát có thể lặp lại thì hữu ích hơn một tuyên bố rộng lớn rằng một trang, khung, hiển thị, hoặc dấu vân tay đơn giản là “hoàn thành” hoặc “an toàn.”

• Xác định hành động tiếp theo. Nêu rõ chính xác những gì kịch bản hoặc người dùng cần làm sau bước chờ đợi hoặc cấu hình.
• Chọn một tín hiệu có thể quan sát. Ưu tiên một thuộc tính trình duyệt, trạng thái vòng đời, điều kiện phần tử, hoặc kết quả render mà hỗ trợ trực tiếp cho hành động đó.
• Giữ các giá trị liên quan mạch lạc. Cài đặt trình duyệt, hệ điều hành, màn hình, ngôn ngữ, đồ họa, và phiên nên mô tả một môi trường hợp lý.
• Xác nhận hành vi ứng dụng bình thường. Một can thiệp về quyền riêng tư hoặc tự động hóa không nên âm thầm phá vỡ API hoặc thành phần mà nó thay đổi.
• Ghi lại bằng chứng chẩn đoán. Lưu các URL, trạng thái, thông điệp console, và tên cấu hình liên quan khi một kiểm tra thất bại.

Kết luận

Shadow DOM cung cấp cho các thành phần một cây nội bộ có phạm vi trong khi giữ vị trí của chúng trong tài liệu lớn hơn và mô hình truy cập. Hosts, gốc, slots, định vùng phong cách, và định vị lại sự kiện hình thành mô hình tư duy thiết yếu. Tự động hóa thành công khi nó xử lý ranh giới một cách rõ ràng, ưu tiên ngữ nghĩa thành phần công khai và chờ đợi định nghĩa và trạng thái thành phần thay vì dựa vào các bộ chọn CSS toàn cầu.

Tài liệu Trình duyệt Scraping Không Ghi Chép giải thích cách các phiên trình duyệt được quản lý được cấu hình, trong khi đó tổng quan sản phẩm Trình duyệt Scraping mô tả bề mặt tự động hóa trình duyệt. Những tài nguyên này cung cấp ngữ cảnh sản phẩm để áp dụng khái niệm trong một quy trình làm việc được ủy quyền.

Tài liệu tham khảo

• Tài liệu hướng dẫn bắt đầu với Trình duyệt Scraping Không Ghi Chép
• Tổng quan sản phẩm Trình duyệt Scraping Không Ghi Chép
• Hướng dẫn tích hợp tự động hóa trình duyệt Scraping Không Ghi Chép
• Các dự án mã nguồn mở Scraping Không Ghi Chép trên GitHub