Allow mounting an app to a ShadowRoot
What problem does this feature solve?
You can mount a Vue App to a ShadowRoot
and therefore avoid one layer of nesting. I think this feature is at least useful for native web components and browser extensions.
I got it to work through some hack. I simply added the functions removeAttribute
and setAttribute
, which don't do anything, to my shadow Root.
Here is a CodePen to see it in action. https://codepen.io/LennyAnders/pen/PozNJKL?editors=1010
What does the proposed API look like?
There is actually no change in the API. The only change is that the mount
function needs to work with ShadowRoot
's.
import App from './App.vue';
const shadowHost = document.querySelector('#my-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'closed' });
createApp(App).mount(shadowRoot);