この翻訳は不完全です。英語から この記事を翻訳 してください。

Shadow DOM API の一つである HTMLSlotElement インターフェースは、<slot> 要素の名前とこの要素にアサインされたノードにアクセスします。

プロパティ

HTMLSlotElement.name
DOMString: slot の名前を取得または設定する際に使えます。

メソッド

HTMLSlotElement.assignedNodes()
この slot にアサインされた要素の列返します。アサインされているノードがない場合、fallback コンテンツを返します。

以下のコードは slotchange example (実行例) から持ってきています。

let slots = this.shadowRoot.querySelectorAll('slot');
slots[1].addEventListener('slotchange', function(e) {
  let nodes = slots[1].assignedNodes();
  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
});

全ての slot への参照を受け取り、2つ目の slot に slotchange イベントを待つイベントリスナーを追加しています。

slot に挿入された要素が変わるたびに、変更された slot の名前と新しい中身のレポートをコンソールに出力します。

仕様

仕様書 策定状況 コメント
HTML Living Standard
HTMLSlotElement の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0
name
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0
assignedNodes
実験的
Chrome 完全対応 53Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 40Safari 完全対応 10.1WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 40Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

ドキュメントのタグと貢献者

このページの貢献者: elkurin
最終更新者: elkurin,