Baseline Widely available *
Das HTMLSlotElement Interface der Shadow DOM-API ermöglicht den Zugriff auf den Namen und die zugeordneten Knoten eines HTML <slot> Elements.
Erbt auch Eigenschaften von seiner Eltern-Schnittstelle, HTMLElement.
HTMLSlotElement.name
Ein String, der verwendet wird, um den Namen des Slots zu erhalten und festzulegen.
Erbt auch Methoden von seiner Eltern-Schnittstelle, HTMLElement.
HTMLSlotElement.assign()
Setzt die manuell zugewiesenen Knoten für diesen Slot auf die angegebenen Knoten.
HTMLSlotElement.assignedNodes()
Gibt eine Sequenz der Knoten zurück, die diesem Slot zugewiesen sind. Wenn die flatten-Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Knoten zurück, die diesem Slot zugewiesen sind, als auch der Knoten, die jedem anderen Slot zugewiesen sind, der Nachfahrer dieses Slots ist. Wenn keine zugewiesenen Knoten gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.
HTMLSlotElement.assignedElements()
Gibt eine Sequenz der Elemente zurück, die diesem Slot zugewiesen sind (und keine anderen Knoten). Wenn die flatten-Option auf true gesetzt ist, gibt sie eine Sequenz sowohl der Elemente zurück, die diesem Slot zugewiesen sind, als auch der Elemente, die jedem anderen Slot zugewiesen sind, der Nachfahrer dieses Slots ist. Wenn keine zugewiesenen Elemente gefunden werden, gibt sie den Fallback-Inhalt des Slots zurück.
Erbt auch Ereignisse von seiner Eltern-Schnittstelle, HTMLElement.
Diese Ereignisse können mithilfe von addEventListener() gehört werden oder indem ein Ereignis-Listener der oneventname-Eigenschaft dieser Schnittstelle zugewiesen wird.
slotchange
Wird auf einer HTMLSlotElement Instanz (<slot> Element) ausgelöst, wenn sich die in diesem Slot enthaltenen Knoten ändern.
Der folgende Ausschnitt stammt aus unserem slotchange-Beispiel (siehe es auch live).
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
let nodes = slots[1].assignedNodes();
console.log(
`Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
);
});
Hier greifen wir auf Referenzen zu allen Slots zu und fügen dem zweiten Slot im Template einen slotchange-Ereignis-Listener hinzu â welcher der Slot ist, dessen Inhalt im Beispiel ständig geändert wird.
Jedes Mal, wenn sich das im Slot eingefügte Element ändert, wird ein Bericht an die Konsole protokolliert, der angibt, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.
Spezifikationen Browser-KompatibilitätRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4