Update to support revamped proposal

[sorvell]

Fixes: #603

New proposal: whatwg/html#10854

[sorvell]

To prevent future issues with conflicting with native implementations, let's consider offering a version of this that's more of a ponyfill. For example:

pony(document).createElement(tag, {customElements})
pony(element).customElements
pony(element).attachShadow({mode: 'open', customElements})

This might be fairly annoying in practice and there are some options:

1. ponyfill or polyfill HTMLElement and CustomElementRegistry?
2. ponyfill or polyfill relevant APIs, which include:
   • Node.customElements
   • Node.prototype.appendChild
   • Node.prototype.insertBefore
   • DocumentFragment.prototype.append
   • ShadowRoot,.prototype.setHTMLUnsafe
   • ShadowRoot.prototype.innerHTML
   • Element.prototype.insertAdjacentHTML
   • Element.prototype.setHTMLUnsafe
   • Element.prototype.append
   • Element.prototype.prepend
   • Element.prototype.insertAdjacentElement
   • Element.prototype.replaceChild
   • Element.prototype.replaceChildren
   • Element.prototype.replaceWith
   • Element.prototype.innerHTML
   • HTMLElement.prototype.attachShadow
   • HTMLElement.prototype.attachInternals
   • Document.prototype.createElement
   • Document.prototype.createElementNS
   • Document.prototype.importNode

[justinfagnani]

It'd be nice for reviewing and future readers to leave links to where public APIs are specced. I think this link would be good here: https://dom.spec.whatwg.org/#dom-documentorshadowroot-customelementregistry

[justinfagnani]

Maybe choose a more descriptive name or add a comment. Maybe setRegistryForSubtree?

Also, does this implement a spec operation? If so, it'd be useful to have a link.

[justinfagnani]

what about initializing a non-shadow root parent, or initializing a subtree where some elements already have registries?

[justinfagnani]

what's this import for?

[jpzwarte]

Both checkout and setup-node are at version 6 atm

[Kai-Richardson]

v7, actually

[jpzwarte]

Any reason why not just 24 (latest; 24.11 atm)

[thepassle]

if options has an .is property, its ignored in createElement here

[thepassle]

additionally if .is is non-null and options.customElementRegistry exists, a NotSupportedError DOMException should be thrown. Im guessing that wouldn't happen here, because the registry is assigned after the createElement call

[thepassle]

I think this ternary is wrong,importNode(node) results in deep = true, but it should be shallow, no?

[thepassle]

When deep is true, I dont think this works correctly for <template> elements:

with polyfill:

<!doctype html>
<html>
  <body>
    <script>
      window.CustomElementRegistryPolyfill = { force: true };
    </script>
    <script src="polyfill.js"></script>
    <template id="t"><p>hello</p></template>
    <script>
      const t = document.getElementById("t");
      console.log(document.importNode(t, true).content.textContent); //❌ ""
      console.log(t.cloneNode(true).content.textContent); //❌ ""
    </script>
  </body>
</html>

without polyfill:

<!doctype html>
<html>
  <body>
    <template id="t"><p>hello</p></template>
    <script>
      const t = document.getElementById("t");
      console.log(document.importNode(t, true).content.textContent); //✅ "hello"
      console.log(t.cloneNode(true).content.textContent); //✅ "hello"
    </script>
  </body>
</html>

[thepassle]

This should include nested shadowroots, e.g.:

<!doctype html>
<body>
  <script>
    function check(label, tag) {
      const host = document.createElement("div");
      host.attachShadow({ mode: "open" }).innerHTML = `<${tag}></${tag}>`;

      class El extends HTMLElement {}
      customElements.define(tag, El);

      customElements.upgrade(host);

      console.log(
        label,
        "element inside shadow root upgraded?",
        host.shadowRoot.firstElementChild instanceof El,
      );
    }

    check("WITHOUT polyfill:", "x-native"); // ✅ true
  </script>

  <script>
    window.CustomElementRegistryPolyfill = { force: true };
  </script>
  <script src="scoped-custom-element-registry.js"></script>

  <script>
    check("WITH polyfill:   ", "x-polyfill"); // ❌ false
  </script>
</body>

[sorvell]

Closing. This PR has been superseded by #668.