How to use Vue in a shadow root with scoped registry #9784
Unanswered
lennartbuit
asked this question in
Help/Questions
Replies: 2 comments
-
Can this get a response? |
Beta Was this translation helpful? Give feedback.
0 replies
-
@yyx990803 You know someone who to get this in there? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 on2.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:
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 ofdocument.createElement
.So, we tried this, we can create a custom (Vue) renderer that has a custom
createElement
function, that usesthis.shadowRoot.createElement
. We got that to work. But, to get that to work, we needed to copy the definitions ofpatchProp
andnodeOps
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
Beta Was this translation helpful? Give feedback.
All reactions