ShadowRoot: slotAssignment プロパティ

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年3月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

slotAssignment は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは一致する名前 (named) に基づいて割り当てされるか、手動 (manual) で割り当てされます。

このプロパティの値は、Element.attachShadow() を呼び出す際に slotAssignment オプションを使用して定義されるほか、シャドウルートを宣言的に作成する際に <template> 要素の shadowrootslotassignment 属性を使用して定義されます。

値

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

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();
  }
}