HTMLSlotElement

Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel zu übersetzen!

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML <slot> element.

Properties

HTMLSlotElement.name
DOMString: Can be used to get and set the slot's name.

Methods

HTMLSlotElement.assignedNodes()
Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.

Examples

The following snippet is taken from our slotchange example (see it live also).

let slots = this.shadowRoot.querySelectorAll('slot');
slots[1].addEventListener('slotchange', function(e) {
  let nodes = slots[1].assignedNodes();
  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
});

Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.

Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.

Specifications

Specification Status Comment
HTML Living Standard
Die Definition von 'HTMLSlotElement' in dieser Spezifikation.
Lebender Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
HTMLSlotElement
Experimentell
Chrome Vollständige Unterstützung 53Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Under consideration
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 40Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 53Chrome Android Vollständige Unterstützung 53Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0
assignedElements
Experimentell
Chrome Vollständige Unterstützung 65Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 66IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung 65Chrome Android Vollständige Unterstützung 65Firefox Android Vollständige Unterstützung 66Opera Android Vollständige Unterstützung JaSafari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
assignedNodes
Experimentell
Chrome Vollständige Unterstützung 53Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Under consideration
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 40Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 53Chrome Android Vollständige Unterstützung 53Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0
name
Experimentell
Chrome Vollständige Unterstützung 53Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Under consideration
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 40Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 53Chrome Android Vollständige Unterstützung 53Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0
slotchange event
Experimentell
Chrome Vollständige Unterstützung 53Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 40Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 53Chrome Android Vollständige Unterstützung 53Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.