このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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月⁩.

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

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

named

要素は自動的にこのシャドウルート内の <slot> 要素に割り当てられます。ホストの子孫要素で、このシャドウルート内の <slot>name 属性と一致する slot 属性を持つものは、そのスロットに割り当てられます。ホストの最上位の子要素で、slot 属性を持たないものは、name 属性を持たない <slot>(「既定のスロット」)に割り当てられます。ただし、そのような <slot> が存在する場合に限ります。

manual

要素は自動的に <slot> 要素に割り当てられるわけではありません。代わりに、HTMLSlotElement.assign() を使用して手動で割り当てる必要があります。

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

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

仕様書

Specification
DOM
# dom-shadowroot-slotassignment

ブラウザーの互換性

関連情報