Subscribe on changes!

Allow mounting an app to a ShadowRoot

avatar
Oct 16th 2020

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);
avatar
Oct 20th 2020

Vue can't work normally with { mode: 'closed' }, even if supports mounting on shadowroot