<template id="$template">
<slot></slot>
<slot name="foo"></slot>
<slot></slot> <!-- 被第一个默认插槽获取了,这个插槽为空 -->
<slot name="bar">
<p><strong>bar was unset</strong></p> <!-- 自定义标签未传入插槽,则插槽内部元素被渲染 -->
</slot>
<div><strong>No Effect</strong></div>
<style>
::slotted(strong) {
color: blue;
}
</style>
</template>
<my-element>
<strong slot="foo">foo</strong>
<strong>deafult</strong>
</my-element>
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: "open" });
const tplEle = document.getElementById("$template");
const content = tplEle.content.cloneNode(true);
shadow.appendChild(content);
}
}
window.customElements.define("my-element", MyElement);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.