Define custom element within another custom element only

Question

We know that we can register our custom element like this:

customElements.define('x-my-element', MyElement);

And now, this element is available like so:

<x-my-element>Woo</x-my-element>

However, is there some sort of a scoped CustomElementRegistry for a specific ShadowRoot?

I'm working on a browser plugin that needs to inject some custom elements into a page, but I want to avoid accidentally colliding with custom elements that the host page may have defined. If I define an outer custom element, and all elements within are defined to work only within that outer custom element, that solves the problem.

(As an alternative, I'll probably just randomly generate element names with a build script.)

Answer 1

There is a proposal for scope registries, no consensus:

• https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md

• https://github.com/WICG/webcomponents/issues?q=is%3Aissue+is%3Aopen+scoped