joicomponents/test/slot_callback/SlotChildCallback.html

Design patterns to build native web components

<template>
  <style>
    div { border: 4px solid green; }
  </style>
  <div>
    <slot>Hello sunshine</slot>
  </div>
</template>

<script type="module">

  import {SlotchangeMixin} from "../../src/slot/SlotChildMixin.js";

  class GreenFrame extends SlotchangeMixin(HTMLElement) {
    constructor() {
      super();
      this.attachShadow({mode: "open"});
      const templ = document.querySelector("template").content.cloneNode(true);
      this.shadowRoot.appendChild(templ);
    }

    slotCallback(slot, fallbackMode){
      console.log(this.id, fallbackMode, slot);
    }
  }

  customElements.define("green-frame", GreenFrame);

  setTimeout(function () {
    const two = document.querySelector("#two");
    two.innerHTML = "";
  }, 3000);
</script>
<green-frame id="one"></green-frame>
<green-frame id="two">¯\_(ツ)_/¯</green-frame>