Get to know MDN better
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
HTMLSlotElement はシャドウ DOM API のインターフェイスで、 HTML の <slot> 要素の名前と割り当てられたノードにアクセスできるようにします。
EventTarget Node Element HTMLElement HTMLSlotElement文字列で、スロットの名前を取得または設定するために使用します。
このスロットに手動で割り当てられたノードを、指定されたノードに設定します。
HTMLSlotElement.assignedNodes()このスロットに割り当てられた一連のノードを返し、flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
HTMLSlotElement.assignedElements()このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
スロットに含まれるノードが変更されたときに HTMLSlotElement インスタンス (<slot> 要素) に発生します。
以下のスニペットは、 slotchange の例からとりました (ライブでも確認)。
ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。
スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。
| HTML # htmlslotelement |
Enable JavaScript to view this browser compatibility table.
This page was last modified on 2025年4月12日 by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.