: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.
Hàm :host() là lớp giả CSS chọn shadow host của shadow DOM chứa CSS đang được dùng bên trong (vì vậy bạn có thể chọn một phần tử tùy chỉnh từ bên trong shadow DOM của nó) — nhưng chỉ khi bộ chọn được truyền vào làm tham số của hàm khớp với shadow host. :host() không có tác dụng khi dùng bên ngoài shadow DOM.
Ứng dụng rõ ràng nhất của lớp giả này là đặt tên lớp chỉ trên một số phiên bản phần tử tùy chỉnh nhất định, rồi đưa bộ chọn lớp liên quan vào làm tham số của hàm. Bạn không thể dùng nó với biểu thức bộ chọn con cháu để chỉ chọn các phiên bản của phần tử tùy chỉnh nằm bên trong một phần tử tổ tiên cụ thể. Đó là công việc của :host-context().
Note:
Trong khi các lớp giả hàm khác như :is() và :not() chấp nhận danh sách bộ chọn làm tham số, :host() nhận một bộ chọn ghép đơn lẻ làm tham số. Ngoài ra, trong khi :is() và :not() chỉ tính đến độ đặc hiệu của tham số, độ đặc hiệu của :host() là cả độ đặc hiệu của lớp giả lẫn độ đặc hiệu của tham số.
Try it
/* Following CSS is being applied inside the shadow DOM. */
:host(h1) {
color: red;
}
:host(#shadow-dom-host) {
border: 2px dashed blue;
}
<!-- elements outside shadow dom -->
<div id="container">
<h1 id="shadow-dom-host"></h1>
</div>
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, only if it is
matched by the selector argument */
:host(.special-custom-element) {
font-weight: bold;
}
Cú pháp
:host(<compound-selector>) {
/* ... */
}
Ví dụ
Tạo kiểu chọn lọc 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 — <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(.footer) { color : red; } 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ó lớp footer được đặt trên chúng — chúng tôi đã dùng nó để tạo màu đặc biệt cho các phiên bản của phần tử nằm bên trong <footer>.
Đặc tả
| Specification |
|---|
| CSS Shadow Module Level 1 # host-selector |