Imperative slot assignment
assign() は HTMLSlotElement インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。手動で割り当てられたノードは初期状態では、ノードに assign() を使用して割り当てられるまで空です。
メモ: 手動の（命令的な）スロットと名前付き（宣言的、自動的な）スロットの割り当てを混在させることはできません。したがって、このメソッドを動作させるには、シャドウツリーを作成するのに slotAssignment: "manual" オプションを使用する必要があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 92 | 92 | 92 | 16.4 | 92 | 16.4 | |
| DOM API | ||||||
| slotAssignment は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは自動的に割り当て (named) されるか、手動で割り当て (manual) されます。このプロパティの値は、slotAssignment オプションを Element.attachShadow() を呼び出す際に使用して定義されます。 | 86 | 86 | 92 | 16.4 | 86 | 16.4 |
注釈 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
const shadow = host.attachShadow({ mode: 'open', slotAssignment: 'manual' });
shadow.innerHTML = '<slot></slot>';
const slot = shadow.querySelector('slot');
slot.assign(host.querySelector('.item'));ライブデモ
Fallback content
Use slot fallback content when the host does not provide a named assignment.
プレビュー全画面表示
Dynamic reassignment
Move existing elements between slots to change layout without rebuilding the host element.
プレビュー全画面表示
実務での使いどころ
-
Imperative slot assignment の活用
assign() は HTMLSlotElement インターフェイスのメソッドで、このスロットの手動で割り当てられたノードをスロットテーブルの順序付きリストに設定します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。