selectors in document,shadowRoot,HTMLElement

no getElements selectors inside shadowRoot

by WebComponents

HTML

<my-element>selecting & adding DOM content</my-element>
<style>
  body       { font:14px Arial }
  div        { color:green }
  [nomethod] { color:red;font-weight:bold }
</style>
<script>
  function HTML(str) {
    document.body.insertAdjacentHTML("beforeend",str);
  }
  function listSelectors(label, root) {
    ["querySelector",
     "querySelectorAll",
     "getElementById",
     "getElementsByTagName",
     "getElementsByClassName",
     "append",
     "prepend",
     "replaceWith",
     "replaceChildren",
     "insertAdjacentHTML",
    ].forEach(method=>HTML(`<div ${root[method]?"":"nomethod"}>${label}.${method}</div>`));
    HTML("<hr>");
  }
  customElements.define("my-element", class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode:"open"}).innerHTML = "<h2><slot></slot></h2>";
      listSelectors("this.shadowRoot", this.shadowRoot);
      listSelectors("document",        document);
      listSelectors('HTMLElement',     document.createElement("DIV"));
    }
  });
</script>