Custom Element Recipes

<my-ce>
  <span slot="top">I'm a top</span>
  <span slot="bottom">I'm a bottom</span>
</my-ce>

<script>
  class MyCe extends HTMLElement {
    constructor() {
      super()
      const shadow = this.attachShadow({ mode: 'open' })
      shadow.innerHTML = `
        <slot name="top"></slot>
        <slot name="bottom"></slot>
      `
    }
  }
  customElements.define('my-ce', MyCe)
</script>

Create an element with Shadow DOM.

Create a custom element with Shadow DOM as described in Shadow DOM recipe.

Previous Next