joicomponents/test/slot_basics/AssignedNodesSimple.html

Design patterns to build native web components

<script>
  class GreenFrame extends HTMLElement {

    constructor(){
      super();
      this.attachShadow({mode: "open"});     //[1]
      this.shadowRoot.innerHTML =
        `<style>
          div {
            display: block;
            border: 10px solid green;
          }
        </style>

        <div>
          <slot>Now you see me.</slot>
        </div>`;
    }
  }
  customElements.define("green-frame", GreenFrame);
</script>

<green-frame id="one"></green-frame>
<br>
<green-frame id="two">hello world</green-frame>
<br>
<green-frame id="three">
  <h1>hello sunshine</h1>
</green-frame>
<br>
<green-frame id="four">
</green-frame>

<script >
  const one = document.querySelector("#one").shadowRoot.children[1].children[0];
  const two = document.querySelector("#two").shadowRoot.children[1].children[0];
  const three = document.querySelector("#three").shadowRoot.children[1].children[0];
  const four = document.querySelector("#four").shadowRoot.children[1].children[0];

  console.log(one.assignedNodes());
  console.log(one.assignedNodes({flatten: true}));
  console.log(two.assignedNodes());
  console.log(two.assignedNodes({flatten: true}));
  console.log(three.assignedNodes());
  console.log(three.assignedNodes({flatten: true}));
  console.log(four.assignedNodes());
  console.log(four.assignedNodes({flatten: true}));
</script>