Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Imperative slot assignment

assign() は HTMLSlotElement インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。手動で割り当てられたノードは初期状態では、ノードに assign() を使用して割り当てられるまで空です。

Web Components

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
assign
92
92
92
16.4
92
16.4
slotAssignment

slotAssignment は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは自動的に割り当て (named) されるか、手動で割り当て (manual) されます。このプロパティの値は、slotAssignment オプションを Element.attachShadow() を呼び出す際に使用して定義されます。
86
86
92
16.4
86
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 4件
実装メモ
  • Chrome 95 以前では、このメソッドは `Element` と `Text` だけでなく、任意の `Node` を受け入れることができた。
  • (要素またはテキスト)...`の代わりに `sequence<Node>` を受け入れた。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (92)
注釈 4件
実装メモ
  • Edge 95 以前では、このメソッドは `Element` と `Text` だけでなく、任意の `Node` も受け付けました。
  • (要素またはテキスト)...`の代わりに `sequence<Node>` を受け入れた。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (92)
注釈 4件
実装メモ
  • Chrome Android 95 より前のバージョンでは、このメソッドは `Element` と `Text` だけでなく、任意の `Node` を受け入れることができた。
  • (要素またはテキスト)...`の代わりに `sequence<Node>` を受け入れた。
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (92)

基本構文

JAVASCRIPT 
function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;
  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();
  }
}

実務での使いどころ

  • Imperative slot assignment の活用

    assign() は HTMLSlotElement インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク