Skip to content

Conversation

sorvell
Copy link
Collaborator

@sorvell sorvell commented Dec 19, 2024

Fixes: #603

New proposal: whatwg/html#10854

@sorvell sorvell changed the title Update to sport revamped proposal Update to support revamped proposal Dec 19, 2024
@sorvell
Copy link
Collaborator Author

sorvell commented Feb 27, 2025

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

}

interface ShadowRoot {
readonly ['customElementRegistry']: CustomElementRegistry | null;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

// > root avoids this.
const scopeForElement = new WeakMap<Node, Element | ShadowRoot>();

const registryForElement = new WeakMap<
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

const {tagName, CustomElementClass} = getTestElement();
registry.define(tagName, CustomElementClass);
shadowRoot.innerHTML = `<${tagName}></${tagName}><div></div>`;
registry.initialize(shadowRoot);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[scoped-custom-element-registry] Update to match new revamped proposal
2 participants