instanceOf RH

by WebComponents

HTML

<style>
  body { background: beige; font: 16.5px arial }
  span { padding: 0 1em }
  span.true { background: lawngreen; border:1px solid black }
  span.false { background: red; color:beige; border:1px solid black }
  .gold { font-weight:bold }
  .darkgreen { color: beige; font-size: 110% }
</style>
<p>
<ul>
  <li>&lttemplate> content is INERT, until you add the content to the DOM</li>
  <li>That means template content is NOT parsed, until it is added to the DOM</li>
  <li>That means Web Components inside a template are not recognized as Web Component</li>
  <li>Note <i><b>when</b></i> the RICH constructor is called</li>
</ul>
</p>
<hr />
<script>
  const createElement = (tag, props) => Object.assign(document.createElement(tag), props)
  function log(str, result,remark="") {
  	let tag, [color,textContent] = str.split(":");
    if (textContent) {
      tag = createElement("span",{ textContent,className:color })
      tag.style.background = color
    } else {
      tag = createElement("span",{ textContent: color })
    }
    document.body.append(
      tag,
      createElement("span", { className: result, textContent: result }),
      remark && result === false ? remark:"",
      createElement("BR"),
    )
  }

	log(`lightblue:class RICH extends HTMLElement`)
  class RICH extends HTMLElement {
    constructor(){
    	super()
    	log("gold:RICH constructor called")
    }
    connectedCallback(){
    	log(`skyblue:<${this.localName}> connectedCallback`)
    }
  }
  log(`lightblue:customElements.define("rich-harris", RICH)`)
  customElements.define("rich-harris", RICH)
  // *************************************************************** run
  function run(tag,content) {
	  document.body.append(createElement("HR"));
    log(`darkgreen:let ${tag} = document.createElement("${tag}")`)
    let el = document.createElement(tag)
    el.innerHTML = "<rich-harris></rich-harris>"
    log(`lightgreen:${tag}.innerHTML = "<rich-harris></rich-harris>"`)
    log(`let rich =...