slot=name - スロット名

• トップ
• HTMLリファレンス
• slot=name

属性

説明

Shadow DOM において、テンプレートのスロットとのマッピングを指定します。

サンプル

<template id="shadow-dom-template">
  Title: [ <slot name="title"></slot> ],
  Artist: [ <slot name="artist"></slot> ]
</template>

<div class="song">
  <span slot="title">Let it be</span>
  <span slot="artist">The Beatles</span>
</div>

<div class="song">
  <span slot="title">Scarborough Fair</span>
  <span slot="artist">Simon & Garfunkel</span>
</div>

<script>
var hostElements = document.getElementsByClassName("song");
for (var i = 0; i < hostElements.length; i++) {
  var rootElement = hostElements[i].attachShadow({mode: "open"});
  var templeteContent = document.getElementById("shadow-dom-template").content.cloneNode(true);
  rootElement.appendChild(templeteContent);
}
</script>

リンク

• https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element
• https://www.w3.org/TR/shadow-dom/
• https://caniuse.com/#search=Shadow%20DOM