このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

グローバル属性~“slot”属性HTML Living Standardで追加

記事Jul. 2nd, 2021
要素を割り当てるシャドウDOMのスロットを指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

slot”属性について

slot”属性は要素に割り当てるシャドウDOMのスロットを指定する属性です。

要素がシャドウDOMが追加されてシャドウホストとなる要素の子要素である場合に“slot”属性の値と同じ値のname”属性が指定されたslot”要素に挿入することができます。

要素がシャドウDOMが追加されてシャドウホストとなる要素の子要素であり、“slot”属性が指定されていない場合はシャドウDOMの中でname”属性が指定されていない最初のslot”要素に挿入されます。

同じスロットに複数の要素が割り当てられた場合には該当する要素がすべて順番に挿入されます。

指定できる値

属性値 説明
スロット名 要素を割り当てるslot”要素name”属性の値

サンプルコード

class SampleElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
ul {
width: calc(100% - 50px);
margin: 20px auto;
padding: 10px 10px 10px 25pxpx;
border-radius: 10px;
font-size: 1.5em;
font-weight: bold;
color: #2b2b2b;
background:
linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%),
linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
</style>
<ul>
<slot name="samplecontent">テキストが入ります</slot>
</ul>
`;
}
}
customElements.define("sample-element", SampleElement);
<sample-element>
<li slot="samplecontent">三毛猫</li>
<li slot="samplecontent">トラ猫</li>
<li slot="samplecontent">白猫</li>
<li slot="samplecontent">黒猫</li>
</sample-element>

<sample-element>
<li slot="samplecontent">鮪</li>
<li slot="samplecontent">鰹</li>
<li slot="samplecontent">鮭</li>
</sample-element>
  • 三毛猫
  • トラ猫
  • 白猫
  • 黒猫
  • 一番上へ
    トップにもどる
    シェアする
    シェアする
    Facebookでシェアする
    ツイート
    Google+でシェア
    Pocket
    はてなブックマーク