expand (no-op) support of DOM shim for DOM traversal methods

[thescientist13]

Type of Change

• New Feature Request

Summary

Tracking a number of items that I think the DOM shim should be able to support, though I'm not sure how feasible / realistic any of them are, so will need to do some discovery of what makes sense to fall "in bounds" for SSR, short of just becoming a headless browser.

Details

Not sure how many of these can / should be supported, but some of them at least, if not at least for no-ops

• [ ] parentNodes
• [ ] querySelector / querySelectorAll
• [ ] getElementBy[Id|ClassName|TagName|...]
• [ ] Node <> Element <> HTMLElement (ensure proper inheritance hierarchy)

Questions

• Is appendNode implemented correctly?
• Use ASTs in DOM shim (?)

[thescientist13]

This comment seems to be relevant for DocumentFragment, fwiw

Yes, DocumentFragment has only getElementById(), querySelector() and querySelectorAll().

[thescientist13]

It seems at least somewhat trivial to at least support no-ops for some of the basic DOM querying methods though?

For example, being able to do something like this with querySelectorAll would be nice without having to worry about it https://github.com/thescientist13/greenwood-full-stack-web-modules/

import sheet from './hero.css' with { type: "css" };

const template = '...';

export default class HeroBanner extends HTMLElement {
  clickButton(el) {
    console.log('clicked button =>', el.textContent);
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

    this.shadowRoot.adoptedStyleSheets = [sheet];
    this.shadowRoot.querySelectorAll('button')
      .forEach(button => {
        button.addEventListener('click', () => this.clickButton(button))
      });
  }
}

customElements.define('app-hero', HeroBanner);

---

What else does a ShadowRoot support? 🤔