Show the JavaScript source for (small) Custom Elements

[Danny-Engelman]

I ran the Inspector on: https://pie-meister.github.io/

My <content-lenght> Web Component is small and doesn't have any methods/properties:

  customElements.define( "content-length", class extends HTMLElement {
      connectedCallback() {
        let source = this.getAttribute("src") || "https://pie-meister.github.io/PieMeister.min.js";
        this.setAttribute("title", source);
        fetch(source, { mode: "cors" }).then(
          (response) => (this.innerHTML = " " + response.headers.get("content-length") + " Bytes")
        );
      }
    }
  );

Suggestions (based on a similar tool I built myself):

• For (small) components, list the [formatted] source code (or optional for all methods)

• List which default methods the component has, this is an indication of complexity

• List the bytecount of each method, again, indicates complexity

• in the CE localName listing, add global collapse option

• in the CE localName listing, add count of all CEs contained in CE

• in the CE localName listing, add count of all similar named CEs (count of one CE)

[Matsuuu]

Oh these are some good suggestions!

Adding a source panel is something I'll definitely do!

[Danny-Engelman]

Don't get me started...

• If there is shadowDOM, info on (used) slots, including analysis of (mismatching) slot names in lightDOM

• class hierarchy, and show me which methods/properties are overloaded.

There is a reason I never published my "Qomponents Inspector" LOL

Optimization;

You are using querySelector to find Elements. Can be done with the (faster) NodeIterator:

// findElements takes a function definition, the output must be Truthy or Falsy
function findElements( accept = x => customElements.get(x.localName) || 0) {
  function log() {
    console.log(`%c findElements `, `background:purple;color:yellow`, ...arguments);
  }
  let node, elements = [], shadowRootCount = 0;
  function diveNode( diveRoot ) {
    // IE9 was last to implement the TreeWalker/NodeIterator API ... in 2011
    let iterator = document.createNodeIterator(
      diveRoot,
      NodeFilter.SHOW_ELEMENT,
      node => accept(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
    );
    while ( node = iterator.nextNode() ) {
      if (node.shadowRoot) {
        log(`dive into shadowRoot #${++shadowRootCount} at`, node.outerHTML);
        [...node.shadowRoot.children].forEach( diveNode );
      }
      elements.push(node);
    }
  }
  diveNode( document.body ); // initial dive location
  log(elements.length, `elements found`,[elements]);
  return elements;
}
findElements(); // find all Custom Elements

[Matsuuu]

Moved here https://github.com/Matsuuu/web-component-devtools/issues/34