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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 53Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

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

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