<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.