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 einem slot-Attribut, das dem name-Attribut eines <slot> in diesem Shadow-Root entspricht, werden diesem Slot zugewiesen. Alle obersten Kinder des Hosts ohne slot-Attribut werden einem <slot> ohne name-Attribut (dem "Standard-Slot") zugewiesen, falls vorhanden.

manual

Elemente werden nicht automatisch zu <slot>-Elementen zugewiesen. Stattdessen müssen sie manuell mit HTMLSlotElement.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.

js
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
# dom-shadowroot-slotassignment

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
slotAssignment

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch