How to use Vue in a shadow root with scoped registry

[lennartbuit]

Hey hey,

We have a design system that exports (lit based) custom elements. We also have microfrontends that use Vue. What we are trying to solve is that if a microfrontend depends on component library version 1.x and another on 2.x, that they can live next to eachother.

In the webcomponent world, there is a proposal to add scoped registries. The idea is that per shadow root, you tell what constructor to use for what tag. So in the "old" microfrontend, we'll point to the 1.x version of the component, and in the "new" microfrontend we'll point to the 2.x version of the component.

So we have a little wrapper around a vue component, that registers components for use in vue:

class SomeApp extends ScopedElementsMixin(HTMLElement) {
  static scopedElements = {
    "scoped-button": CustomButton,
  };

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.app = createApp(App);
    this.app.mount(this.shadowRoot);
  }
}
customElements.define("some-app", SomeApp);

Now, in a scoped registry world, if you set innerHTML, you will automatically use your locally-registered components (and only those!). Thats great, but, when using imperative construction API's, you need to specify for what shadow root you create elements. So, this.shadowRoot.createElement instead of document.createElement.

So, we tried this, we can create a custom (Vue) renderer that has a custom createElement function, that uses this.shadowRoot.createElement. We got that to work. But, to get that to work, we needed to copy the definitions of patchProp and nodeOps from @vue/runtime-dom as they are not exported. Not great.

Would there be a way to amend the default vue renderer with a new createElement function that is aware of these scoped elements?

---

Here is a little project using scoped registry, showing the differences between native web, and Vue: https://codesandbox.io/p/devbox/scoped-elements-l7dd42

[stevenkuster]

Can this get a response?

[BartJanvanAssen]

@yyx990803 You know someone who to get this in there?

[Jordan-McMillan]

Scoped registry support is something I'm looking for as well.

I've been having problems getting a workaround custom renderer functional since createElement doesn't seem to have context on the current Vue app or which ShadowRoot it should target. @lennartbuit did you have an example workaround custom renderer?
Edit: Think I have a workaround now, previously I was trying to patch all the functionality into runtime-dom with patch-package. Would still like to see better support directly in Vue though, its so close.

[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.