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 ::part(inside-teleport):

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>

Also, please, make sure your style tag doesn't have a scoped attribute. In this case class names will be transformed

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 adoptedStylesheets to the shadow root.

There is updated example, where I copy all styles from style tags and link[rel="stylesheet"] tags into the shadow tree as we do during development:
https://stackblitz.com/edit/vitejs-vite-tktaso?file=src%2Fmain.js

You can see that color: green is applied, but v-bind(background) is not.

Also there is our rendered Popover component outside shadow tree. You can see that there is a style attribute on both .Popover and .Popover__content elements equal to --479fb184: 328px; --b365c6da: 425.25px; --2352ac89: 569px;.

The same Popover inside shadow dom. .Popover has style attribute, but .Popover__content does not.