Element.slot

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

Element インターフェースの slot プロパティは shadow DOM slot の名前を返します。

slot は、web コンポーネント の中にユーザーが任意のマークアップを代入できる要素を提供します (template と slot の使い方 により詳しい説明があります)。

Syntax

var aString = element.slot
element.slot = aString

DOMString

templateのサンプル (実行例)では、<my-paragraph> と名付けた簡単なカスタム要素を作っています。このカスタム要素には、shadow root が付いており、my-text と名付けられた slot 要素が含まれています。

<my-paragraph> がドキュメントの中で利用された時、その内部で slot 属性を my-text に設定した要素を作ることで、slot の内容を変更することができます。 

<my-paragraph>
  <span slot="my-text">新しいテキストを代入します</span>
</my-paragraph>

JavaScript ファイルで <span> への参照を取得すると、対応する <slot> の名前を取得できます。 

let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.slot); // 'my-text' と表示されます

仕様

仕様書 策定状況 コメント
DOM
slot の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
slotChrome 完全対応 53Edge 完全対応 79Firefox 完全対応 63IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 53Chrome Android 完全対応 53Firefox Android 完全対応 63Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応