ShadowRoot: slotAssignment-Eigenschaft
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die schreibgeschützte slotAssignment
-Eigenschaft des ShadowRoot
-Interfaces gibt den Slot-Zuweisungsmodus für den Shadow-DOM-Baum zurück. Knoten werden entweder automatisch (named
) oder manuell (manual
) zugewiesen. Der Wert dieser Eigenschaft wird mit der slotAssignment
-Option festgelegt, wenn Element.attachShadow()
aufgerufen wird.
Wert
Ein String, der einer der folgenden sein kann:
named
-
Elemente werden automatisch zu
<slot>
-Elementen innerhalb dieses Shadow-Roots zugewiesen. Alle Nachkommen des Hosts mit einemslot
-Attribut, das demname
-Attribut eines<slot>
in diesem Shadow-Root entspricht, werden diesem Slot zugewiesen. Alle obersten Kinder des Hosts ohneslot
-Attribut werden einem<slot>
ohnename
-Attribut (dem "Standard-Slot") zugewiesen, falls vorhanden. manual
-
Elemente werden nicht automatisch zu
<slot>
-Elementen zugewiesen. Stattdessen müssen sie manuell mitHTMLSlotElement.assign()
zugewiesen werden.
Beispiele
Im folgenden Beispiel wird die assign()
-Methode verwendet, um den richtigen Tab in einer Tabbed-Anwendung anzuzeigen. Die Funktion wird aufgerufen und das anzuzeigende Panel wird dem Slot zugewiesen. Wir prüfen, ob das slotAssignment
named
ist, um zu verhindern, dass eine Ausnahme ausgelöst wird, wenn HTMLSlotElement.assign()
aufgerufen wird.
function UpdateDisplayTab(elem, tabIdx) {
const shadow = elem.shadowRoot;
// This test is usually not needed, but can be useful when debugging
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();
}
}
Spezifikationen
Specification |
---|
DOM Standard # dom-shadowroot-slotassignment |
Browser-Kompatibilität
BCD tables only load in the browser