Jul. 2nd, 2021
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | トランスペアレント・コンテンツ・モデル |
| タグの省略 | 不可 |
“slot”要素はシャドウDOMの中にコンテンツを差し込むためのスロットを表します。“Web Components”の一部で、多くの場合カスタム要素とともに使用されます。
スロットにはシャドウDOMが追加されてシャドウホストとなる要素の子要素を差し込むことができます。
“name”属性でスロット名を指定することで、グローバル属性の“slot”属性によって要素が割り当てられるスロットを指定することができます。
“name”属性が指定されていない1個目のスロットには“slot”属性によってスロットが割り当てられていないシャドウホストの子要素が挿入されます。2個目以降の“name”属性が指定されていないスロットは無視されます。
同じスロットに複数の要素が割り当てられている場合には該当する要素がすべて順番に挿入されます。
スロットに割り当てられる要素がない場合には“slot”要素の内容が表示されます。
サンプルコード
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 25px;
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>
＃
＃
仕様書
“slot”要素はHTML Living Standardから定義されている要素です。
DOMインターフェース
[Exposed=Window]
interface HTMLSlotElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString name;
sequence<Node> assignedNodes(optional AssignedNodesOptions options = {});
sequence<Element> assignedElements(optional AssignedNodesOptions options = {});
undefined assign((Element or Text)... nodes);
};
dictionary AssignedNodesOptions {
boolean flatten = false;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
slot {
display: contents;
}
