Jul. 2nd,2021
＃
“name”属性について
“name”属性は“slot”要素が表すスロットの名前を指定します。
“name”属性はシャドウDOMが追加されてシャドウホストとなった要素の子要素をスロットに割り当てるために使用されます。“name”属性でスロット名が指定されたスロットにはグローバル属性の“slot”属性で同じスロット名が指定された要素が挿入されます。同じ値の“slot”属性を指定された要素が複数ある場合は該当するすべての要素が順番にスロットに挿入されます。
“name”属性が指定されていない1個目のスロットには“slot”属性によってスロットが割り当てられていないシャドウホストの子要素が挿入されます。2個目以降の“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>
