Support for scoped custom element registries

[filimon-danopoulos-stratsys]

Scoped custom element registries allows a shadow root to define custom elements that are unique to that shadow root. The concept is very helpful when creating design systems using web components as it allows different shadow roots to use different versions of the design system components.

If a Vue application is rendered within a shadow root that has a scoped element registry attached it will currently always use document.createElement when creating nodes. This will not use the scoped custom elements rather the globally registered ones.

We can currently create new renderers with custom renderers , but the docs state specifically that those are intended for "non-DOM environments". Re-implementing essentially the same thing by copy/paste and scoping to this.shadowRoot rather document seems error prone.

At the bear minimum it would be nice if the default implementations in nodeOps and patchProp would be available to import so that we don't have to re-write everything.

I am not very well versed in this topic so I might be missing something obvious in which case please correct me.

Resources:
https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md
https://open-wc.org/docs/development/scoped-elements/

[pascalvos]

i agree this would allow to scope custom elements and would help a lot when building mfe's in vue.
now having to copy stuff over is far from a ideal situation

[Jordan-McMillan]

If we can get the default implementations of nodeOps and patchProp exported from @vue/runtime-dom then that would help a lot with creating the new custom renderer which only overrides the createElement function.

From my testing it looks like a simple export added here would do that.
export { nodeOps, patchProp }

There is also another discussion here related to this topic.