ShadowRoot: thuộc tính slotAssignment
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 chỉ đọc slotAssignment của giao diện ShadowRoot trả về chế độ gán slot cho cây shadow DOM. Các nút được gán tự động (named) hoặc được gán thủ công (manual). Giá trị của thuộc tính này được xác định bằng tùy chọn slotAssignment khi gọi Element.attachShadow().
Giá trị
Một chuỗi có thể là một trong các giá trị sau:
named-
Các phần tử được gán tự động vào các phần tử
<slot>bên trong shadow root này. Mọi nút hậu duệ của host có thuộc tínhslotkhớp với thuộc tínhnamecủa một<slot>trong shadow root này sẽ được gán vào slot đó. Mọi phần tử con cấp cao nhất của host không có thuộc tínhslotsẽ được gán vào một<slot>không có thuộc tínhname(slot mặc định) nếu có. manual-
Các phần tử không được gán tự động vào các phần tử
<slot>. Thay vào đó, chúng phải được gán thủ công bằngHTMLSlotElement.assign().
Ví dụ
Trong ví dụ dưới đây, phương thức assign() được dùng để hiển thị đúng tab trong một ứng dụng dùng tab. Hàm được gọi và truyền vào panel cần hiển thị, sau đó panel đó được gán vào slot. Chúng ta kiểm tra xem slotAssignment có phải là named hay không để ngăn một ngoại lệ được ném ra khi HTMLSlotElement.assign() được gọi.
function UpdateDisplayTab(elem, tabIdx) {
const shadow = elem.shadowRoot;
// Kiểm tra này thường không cần thiết, nhưng có thể hữu ích khi gỡ lỗi
if (shadow.slotAssignment === "named") {
console.error(
"Trying to manually assign a slot on an automatically-assigned (named) slot",
);
}
const slot = shadow.querySelector("slot");
const panels = elem.querySelectorAll("tab-panel");
if (panels.length && tabIdx && tabIdx <= panels.length) {
slot.assign(panels[tabIdx - 1]);
} else {
slot.assign();
}
}
Thông số kỹ thuật
| Specification |
|---|
| DOM # dom-shadowroot-slotassignment |