ShadowRoot: slotAssignment-Eigenschaft

Wert

Ein String, der einer der folgenden sein kann:

named

Elemente werden automatisch <slot>-Elementen innerhalb dieses Shadow-Roots zugewiesen. Alle obersten Kind-Elemente des Hosts mit einem slot-Attribut, das dem name-Attribut eines <slot> innerhalb dieses Shadow-Roots entspricht, werden diesem Slot zugewiesen. Alle obersten Kind-Elemente des Hosts ohne slot-Attribut werden einem <slot> ohne name-Attribut (dem "Standard-Slot") zugewiesen, falls vorhanden.

manual

Elemente werden nicht automatisch <slot>-Elementen zugewiesen. Stattdessen müssen sie manuell mit HTMLSlotElement.assign() zugewiesen werden.

Beispiele

Grundlegende Verwendung

Im untenstehenden Beispiel wird die assign()-Methode verwendet, um den richtigen Tab in einer tabulierten Anwendung anzuzeigen. Die Funktion wird aufgerufen und das anzuzeigende Panel wird dem Slot zugewiesen. Wir prüfen, ob slotAssignment named ist, um eine Ausnahme zu verhindern, die 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

Browser-Kompatibilität

Siehe auch

• Element.attachShadow()
• HTMLSlotElement.assign()
• shadowrootslotassignment Attribut des <template>-Elements
• HTMLTemplateElement.shadowRootSlotAssignment