Skip to content

slot

html
<template id="temp">
  <section>default slot: <slot></slot></section>
  <section>name slot first: <slot name="first"></slot></section>
  <section>name slot tow: <slot name="tow"></slot></section>
</template>
<t-button>
  click me

  <span slot="first">123</span>
  <span slot="tow">123</span>
</t-button>
javascript
class TButton extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "open" }).appendChild(
      document.querySelector("#temp").content.cloneNode(true)
    );
  }
}
customElements.define("t-button", TButton);