このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLSlotElement: assign() メソッド
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月.
assign() は HTMLSlotElement インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。手動で割り当てられたノードは初期状態では、ノードに assign() を使用して割り当てられるまで空です。
メモ:
手動の(命令的な)スロットと名前付き(宣言的、自動的な)スロットの割り当てを混在させることはできません。したがって、このメソッドを動作させるには、シャドウツリーを作成するのに slotAssignment: "manual" オプションを使用する必要があります。
構文
js
assign(node1)
assign(node1, node2)
assign(node1, node2, /* ... ,*/ nodeN)
引数
返値
なし (undefined)。
例外
NotAllowedErrorDOMException-: 自動的に割り当てられるスロットでこのメソッドを呼び出すと発生します。
例
以下の例では、タブ型アプリケーションで正しいタブを表示するために 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 # dom-slot-assign |
ブラウザーの互換性
Loading...