Web Component Prototype Chains

by WebComponents

HTML

<!-- log prototypes of Elements -->
<style>
  body { font: 19px arial; background: beige }
  b i{font-weight:bolder}
  b b{color:green}
  /* STYLE :DEFINED AND :NOT(:DEFINED) */
  .element:defined { background: lightgreen } /* Native (unknown)elements or created with Custom Elements API */
  .element:not(:defined) { background: gold } /* NO JS used! This is the one AI and most developers misunderstand! */
</style>

<main>
  <all-elements id="allElements" style="display:none">
    <!--  5 Elements of which the prototypes are listed -->
    <div>HTMLDIVElement</div>
    <tagname>HTMLUnknownElement</tagname>
    <tag-name><i>Undefined</i> <b>Custom Element</b></tag-name>
    <tag-name-foo><i>Defined Named</i> <b>Custom Element</b></tag-name-foo>
    <tag-name-bar><i>Defined Unnamed</i> <b>Custom Element</b></tag-name-bar>
  </all-elements>

  <h2>Prototype Chains:</h2>
  <proto-chains id="protoChains"><!-- HTML injected here --></proto-chains>

  <!-- listing prototype name, highlighting :not:defined elements (only one)  -->
  <h2>:not(:defined) { background:gold }</h2>
    <style>
      test-defined-elements > * {
        display: block;
      }
      *:not(:defined) {
        background: gold;
      }
    </style>
    <test-defined-elements id="testDefine">
      <div>HTMLDIVElement</div>
      <tagname>HTMLUnknownElement</tagname>
      <tag-name><i>Undefined</i> <b>Custom Element</b></tag-name>
      <tag-name-foo><i>Defined Named</i> <b>Custom Element</b></tag-name-foo>
      <tag-name-bar><i>Defined Unnamed</i> <b>Custom Element</b></tag-name-bar>

  </text-defined-elements>

</main>

<script>
  // generic create element Function with properties, coolest function ever
  const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
  
  // define Web Components: Named and Unnamed!
  customElements.define('tag-name-foo', class FOO extends HTMLElement { });
 ...