ShadowRoot: slotAssignment プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2023年3月⁩.

slotAssignment は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは自動的に割り当て (named) されるか、手動で割り当て (manual) されます。このプロパティの値は、slotAssignment オプションを Element.attachShadow() を呼び出す際に使用して定義されます。

値

文字列で、以下のどちらかです。

named: 要素は自動的にこのシャドウルート内の <slot> 要素に割り当てられます。ホストの子孫要素で、このシャドウルート内の <slot> の name 属性と一致する slot 属性を持つものは、そのスロットに割り当てられます。ホストの最上位の子要素で、slot 属性を持たないものは、name 属性を持たない <slot>（「既定のスロット」）に割り当てられます。ただし、そのような <slot> が存在する場合に限ります。
manual: 要素は自動的に <slot> 要素に割り当てられるわけではありません。代わりに、HTMLSlotElement.assign() を使用して手動で割り当てる必要があります。

例

以下の例では、assign() メソッドを使用して、タブ付きアプリケーションで正しいタブを表示します。この関数は、表示するパネルを渡されて呼び出され、その後スロットに割り当てられます。 slotAssignment が named であるかどうかをテストし、HTMLSlotElement.assign() が呼び出された際に例外が発生しないようにします。

function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;

  // 通常、このテストは必要ありませんが、デバッグ時に役立つことがあります。
  if (shadow.slotAssignment === "named") {
    console.error(
      "自動割り当て（名前付き）スロットに手動で割り当てようとしています",
    );
  }
  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();
  }
}