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

Imperative slot assignment

Slot.assign() メソッドにより、slotAssignment: 'manual' で作成した Shadow DOM のスロットにノードを命令的に割り当てます。

Web Components

概要

Slot.assign() メソッドにより、slotAssignment: 'manual' で作成した Shadow DOM のスロットにノードを命令的に割り当てます。

対応ブラウザ

デスクトップ

Chrome 92+
Edge 92+
Safari 16.4+
Firefox 92+

モバイル

Chrome Android 92+
Safari iOS 16.4+
Firefox Android 92+

基本構文

JAVASCRIPT 
const shadow = host.attachShadow({ mode: 'open', slotAssignment: 'manual' });
shadow.innerHTML = '<slot></slot>';
const slot = shadow.querySelector('slot');
slot.assign(host.querySelector('.item'));

実務での使いどころ

  • Imperative slot assignment の活用

    命令的スロット割り当て。JavaScriptでSlotの割り当てを制御するAPI。

注意点

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

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク