:host
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
:host là lớp giả CSS chọn shadow host của shadow DOM chứa CSS đang được dùng bên trong — nói cách khác, điều này cho phép bạn chọn một phần tử tùy chỉnh từ bên trong shadow DOM của nó.
Note: Lớp giả này không có tác dụng khi dùng bên ngoài shadow DOM.
Try it
/* This CSS is being applied inside the shadow DOM. */
:host {
background-color: aqua;
}
<h1 id="shadow-dom-host"></h1>
const shadowDom = init();
// add a <span> element in the shadow DOM
const span = document.createElement("span");
span.textContent = "Inside shadow DOM";
shadowDom.appendChild(span);
// attach shadow DOM to the #shadow-dom-host element
function init() {
const host = document.getElementById("shadow-dom-host");
const shadowDom = host.attachShadow({ mode: "open" });
const cssTab = document.querySelector("#css-output");
const shadowStyle = document.createElement("style");
shadowStyle.textContent = cssTab.textContent;
shadowDom.appendChild(shadowStyle);
cssTab.addEventListener("change", () => {
shadowStyle.textContent = cssTab.textContent;
});
return shadowDom;
}
/* Selects a shadow root host */
:host {
font-weight: bold;
}
Cú pháp
:host {
/* ... */
}
Ví dụ
Tạo kiểu cho shadow host
Các đoạn mã sau được lấy từ ví dụ host-selectors (xem trực tiếp).
Trong ví dụ này chúng ta có một phần tử tùy chỉnh cơ bản — <context-span> — mà bạn có thể bao quanh văn bản:
<h1>
Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
Bên trong constructor của phần tử, chúng ta tạo các phần tử style và span, điền nội dung của phần tử tùy chỉnh vào span, và điền một số quy tắc CSS vào phần tử style:
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);
style.textContent =
"span:hover { text-decoration: underline; }" +
":host-context(h1) { font-style: italic; }" +
':host-context(h1)::after { content: " - no links in headers!" }' +
":host-context(article, aside) { color: gray; }" +
":host(.footer) { color : red; }" +
":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
Quy tắc :host { background: rgb(0 0 0 / 10%); padding: 2px 5px; } tạo kiểu cho tất cả các phiên bản của phần tử <context-span> (shadow host trong trường hợp này) trong tài liệu.
Đặc tả
| Specification |
|---|
| CSS Shadow Module Level 1 # host-selector |