CSS scoping

Module CSS scoping định nghĩa các cơ chế scoping và đóng gói CSS, tập trung vào cơ chế scoping của Shadow DOM.

Các style CSS có phạm vi toàn cục hoặc được scoped vào một shadow tree. Các style toàn cục áp dụng cho tất cả các phần tử trong cây node khớp với selector, bao gồm các custom element trong cây đó, nhưng không áp dụng cho các shadow tree tạo nên mỗi custom element. Các selector và định nghĩa style liên quan của chúng không rò rỉ giữa các scope.

Trong CSS của một shadow tree, các selector không chọn các phần tử bên ngoài cây, dù trong phạm vi toàn cục hay trong các shadow tree khác. Mỗi custom element có shadow tree riêng của nó, chứa tất cả các thành phần tạo nên custom element đó (nhưng không bao gồm chính custom element, hay "host").

Đôi khi sẽ hữu ích khi có thể tạo style cho một host từ bên trong ngữ cảnh shadow tree. Module CSS scoping làm điều này có thể bằng cách định nghĩa các selector:

• Cho phép một shadow tree tạo style cho host của nó.
• Cho phép CSS bên ngoài tạo style cho các phần tử trong một Shadow DOM (nhưng chỉ khi custom element liên quan được thiết lập để chấp nhận style bên ngoài).