HTML5

：

タグ（要素）

：

SLOT

　編集：2022.10.31 by T.A.

[Edge]。→、

スロットを定義する。¶シャドウ ツリー ルート

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

この要素を使用できる文脈

フレージング内容が期待される場所。

内容モデル

透過的。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

典型的にシャドウ ツリーに使用される。もしあれば、SLOT 要素はその割り当てられるノードを表し、そうでなければその内容を表す。

SLOT要素は、別の要素にスロットを割り当てるために使用される： name 属性をもつ SLOT 要素は、その要素がその name 属性の値と一致する値を持つ SLOT 要素を持ち、かつ SLOT 要素がその対応する SLOT の属性値を持つルートのホストを持つシャドウ ツリーの子である場合、任意の要素が割り当てられる名前付きスロットを作成する。

例
mdn
<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"><<slot name="element-name">NEED NAME</slot>></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>

Note： この完全な例は、element-details で見ることができます（ライブ実行もご覧ください）。また、テンプレートとスロットの利用 にも説明があります。

name属性

シャドウ ツリー スロットの名前。

任意の文字列値を含んでもよい。

HTML： 

<DIV id=IdDiv>
 <IMG slot=nameImg src="../Sample/Picture.jpg">
</DIV>
<TEMPLATE id=IdTemplate>
 画像：<SLOT name=nameImg></SLOT>
</TEMPLATE>

JavaScript： 

var TempContent=IdTemplate.content.cloneNode(true);	//テンプレートの複製を取得
var RE=IdDiv.attachShadow({mode:"open"});	//ホストである IdDiv に Shadow DOM を追加
RE.appendChild(TempContent);	// Shadow DOM に複製テンプレートを追加

→HTMLSlotElement.content、Node.cloneNode()、Element.attachShadow()、Node.appendChild()。

→テストを参照

テスト