Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow mounting an app to a ShadowRoot #2399

Closed
lennyanders opened this issue Oct 16, 2020 · 1 comment · Fixed by #2447
Closed

Allow mounting an app to a ShadowRoot #2399

lennyanders opened this issue Oct 16, 2020 · 1 comment · Fixed by #2447

Comments

@lennyanders
Copy link

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);
@unbyte
Copy link
Contributor

unbyte commented Oct 20, 2020

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

lennyanders pushed a commit to lennyanders/bookmark-sidebar that referenced this issue Dec 30, 2020
- remove dirty hack due to vue update vuejs/core#2399
@github-actions github-actions bot locked and limited conversation to collaborators Oct 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants