<slot>

ジャンプ先:
  1. 属性
  2. 例
  3. 仕様書
  4. ブラウザーの対応

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

HTML の <slot> 要素 — ウェブコンポーネント技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ
許可されている内容 透過的コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 Any element that accepts 記述コンテンツ
許可されている ARIA ロール なし
DOM インターフェイス HTMLSlotElement

属性

この要素にはグローバル属性があります。

name
スロットの名前です。
名前付きスロットは、 <slot> 要素に name 属性が付きます。

例

<template id="element-details-template">
  <style>
    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
    .name {font-weight: bold; color: #217ac0; font-size: 120% }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0; 
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9; 
      border-radius: 4px;
    }
    .attributes { margin-left: 22px; font-size: 90% }
    .attributes p { margin-left: 16px; font-style: italic }
  </style>
  <details>
    <summary>
      <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr>
</template>

メモ: この完全な例は、要素の詳細で実際に動作しています (ライブ実行もご覧ください)。また、テンプレートとスロットの利用にも説明があります。

仕様書

仕様書 状態 備考
HTML Living Standard
<slot> の定義		 現行の標準  
DOM
Slots の定義		 現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 53Edge 未対応 なし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 完全対応 10WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし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
nameChrome 完全対応 53Edge 未対応 なし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 完全対応 10WebView Android 完全対応 53Chrome Android 完全対応 53Edge Mobile 未対応 なし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

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

タグ: 
このページの貢献者: mfuji09
最終更新者: mfuji09,