HTMLSlotElement: assign() メソッド

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

メモ: 手動の（命令的な）スロットと名前付き（宣言的、自動的な）スロットの割り当てを混在させることはできません。したがって、このメソッドを動作させるには、シャドウツリーを作成するのに slotAssignment: "manual" オプションを使用する必要があります。

構文

js
assign(node1)
assign(node1, node2)
assign(node1, node2, /* … ,*/ nodeN)

引数

node1, …, nodeN

一連の Element または Text ノードです。

返値

なし (undefined)。

例外

  • NotAllowedError DOMException -: 自動的に割り当てられるスロットでこのメソッドを呼び出すと発生します。

例

以下の例では、タブ型アプリケーションで正しいタブを表示するために assign() メソッドを使用しています。この関数が呼び出され、表示するパネルが渡され、それがスロットに代入されます。

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

仕様書

Specification
HTML Standard
# dom-slot-assign

ブラウザーの互換性

BCD tables only load in the browser

関連情報