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? 🤔

[thescientist13]

One simple trick that could be worth documenting, is to completely opt-out of SSR / prerendering (at least in Greenwood) is to use the good ol' type of check on window, e.g.

import copy from "../../assets/copy-button.svg?type=raw";
import sheet from "./copy-to-clipboard.css" with { type: "css" };

const template = document.createElement("template");

template.innerHTML = `
  <button id="icon" title="Copy to clipboard">${copy}</button>
`;

export default class CopyToClipboard extends HTMLElement {
  connectedCallback() {
    // bail of out of SSR entirely
    if (!this.shadowRoot && typeof window !== "undefined") {
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content.cloneNode(true));

      this.shadowRoot.adoptedStyleSheets = [sheet];

      this.shadowRoot.getElementById("icon")?.addEventListener("click", () => {
        const contents = this.getAttribute("content") ?? undefined;

        navigator.clipboard.writeText(contents);
        console.log("copying the following contents to your clipboard =>", contents);
      });
    }
  }
}

customElements.define("app-ctc", CopyToClipboard);