ShadowRoot: thuộc tính adoptedStyleSheets
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Thuộc tính adoptedStyleSheets của giao diện ShadowRoot đặt một mảng các stylesheet được tạo sẵn để cây con shadow DOM sử dụng.
Note:
Một stylesheet được tạo sẵn là stylesheet được tạo theo lập trình bằng CSSStyleSheet() constructor (khác với stylesheet do user-agent tạo ra khi nhập stylesheet từ một script, được nhập bằng <style> và @import, hoặc được liên kết qua <link>.
Cùng một stylesheet được tạo sẵn có thể được tiếp nhận bởi nhiều thể hiện ShadowRoot, và bởi chính tài liệu cha (bằng thuộc tính Document.adoptedStyleSheets). Việc thay đổi một stylesheet đã được tiếp nhận sẽ ảnh hưởng đến tất cả các đối tượng đã tiếp nhận nó.
Các stylesheet trong thuộc tính adoptedStyleSheets được tính cùng với các stylesheet khác của shadow DOM. Để xác định CSS tính toán cuối cùng của bất kỳ phần tử nào, chúng được xem như đã được thêm sau các stylesheet khác trong shadow DOM (ShadowRoot.styleSheets).
Chỉ các stylesheet được tạo bằng CSSStyleSheet() constructor, và được tạo trong cùng Document cha với shadow root, mới có thể được tiếp nhận.
Giá trị
Giá trị là một mảng các thể hiện CSSStyleSheet phải được tạo bằng constructor CSSStyleSheet() trong ngữ cảnh của Document cha của shadow root.
Nếu mảng cần được sửa đổi, hãy dùng các thao tác biến đổi tại chỗ như push(). Bản thân các thể hiện CSSStyleSheet cũng có thể được sửa đổi, và các thay đổi này sẽ áp dụng ở mọi nơi stylesheet đó được tiếp nhận.
Trong một phiên bản trước của đặc tả, mảng này không thể sửa đổi, nên cách duy nhất để thêm stylesheet mới là gán một mảng mới cho adoptedStyleSheets.
Ví dụ
Tiếp nhận một stylesheet
Đoạn mã dưới đây trước tiên tạo một stylesheet, sau đó gọi CSSStyleSheet.replaceSync() để thêm một quy tắc vào sheet.
// Tạo một stylesheet "constructed" rỗng
const sheet = new CSSStyleSheet();
// Áp dụng một quy tắc cho sheet
sheet.replaceSync("a { color: red; }");
Sau đó chúng ta tạo một ShadowRoot và truyền đối tượng sheet vào adoptedStyleSheets trong một mảng.
// Tạo một phần tử trong tài liệu rồi tạo shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
// Tiếp nhận sheet vào shadow DOM
shadow.adoptedStyleSheets = [sheet];
Chúng ta vẫn có thể sửa stylesheet sau khi nó đã được thêm vào mảng. Bên dưới, chúng ta thêm một quy tắc mới vào cùng sheet bằng CSSStyleSheet.insertRule().
sheet.insertRule("* { background-color: blue; }");
// Tài liệu bây giờ sẽ có nền màu xanh.
Thêm một stylesheet mới
Các stylesheet mới có thể được thêm vào cuối document hoặc shadow root bằng cách dùng adoptedStyleSheets.push():
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");
// Nối sheet mới vào.
shadow.adoptedStyleSheets.push(extraSheet);
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |