-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
Teleport + CSS v-bind does not work with shadow target #12287
Comments
Hi, @Mefinst ! May be I get something wrong, but I think the problem is that you are trying to apply CSS classes outside of incapsulated shadowDOM to that shadowDOM element. But as I know it doesn't work by the nature of native elements' incapsulation concept. There are special techniques for this case. I've changed a little bit your example in order to make it work. I've used template: <teleport :to="teleTarget">
<div part="inside-teleport" class="v-bind-fail">Failure</div>
</teleport> <style> <style>
div::part(inside-teleport) {
color: red;
background-color: yellow;
}
</style>
The full example (a fork from your example) here: https://stackblitz.com/edit/vitejs-vite-xjxwcw?file=src%2Fcomponents%2FHelloWorld.vue Also, there are other techniques how you can apply global styles to shadowed component: https://jordanbrennan.hashnode.dev/8-ways-to-style-the-shadow-dom I hope it will help you. If yes, it's not Vue-related issue. Thanks a lot. |
Excuse me, I made a little mistake in the example. We bundle our app as a single JS file for microfrontends which applies all styles as There is updated example, where I copy all styles from You can see that Also there is our rendered Popover component outside shadow tree. You can see that there is a The same Popover inside shadow dom. |
Vue version
3.4.15, 3.5.12
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-qg9sjb?file=src%2Fcomponents%2FHelloWorld.vue
Steps to reproduce
v-bind
values in SFC of component containing teleportIn the linked example I set an element with class
v-bind-fail
to have red background using v-bind. But it is white.What is expected?
v-bind
styles are applied to teleported dom element.What is actually happening?
v-bind
styles are not applied to teleported dom element.System Info
No response
Any additional comments?
v-bind
is implemented usingvar(--some-hash)
custom properties. Values for those provided by inline style attributes. When some part of a component is inside teleport tag those style attributes duplicated there. At least normally so. When teleport target is inside shadow dom styles aren't duplicated.From my perspective v-bind implementation expects teleport to be used with selectors only, but it can be used with
HTMLElement
variable which can point to shadow tree element. It seemsv-bind
implementation uses something similar todocument.querySelector
to apply variables to teleported parts of the tree. And it fails to locate elements in the shadow tree.The text was updated successfully, but these errors were encountered: