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

fix(VOverlay): App mounted in shadow dom #19947

Merged
merged 4 commits into from
Jun 11, 2024

Conversation

joelmandell
Copy link
Contributor

Description

This checks if the target of VOverlay is an shadow dom element and attaches it to that one. This fixes issues when mounting app on shadow dom. This fixes #19943

Markup:

Playground is not provided because this is setup in a different way, it can be examined by the repro here:
https://github.com/joelmandell/shadow_dom

Without applying this PR, v-overlay-container will be attached outside the shadow dom and not working correctly.

@joelmandell
Copy link
Contributor Author

@MajesticPotatoe I might need a poke in right direction here to perfect this one. Because there is some css-issues still. For example in my repro I use a v-select. The items in the v-select gets dark background color and with darkened text. So there is some more to throw at this one.

@johnleider johnleider added this to the v3.6.x milestone Jun 11, 2024
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VOverlay VOverlay labels Jun 11, 2024
@johnleider johnleider merged commit e6e76d5 into vuetifyjs:master Jun 11, 2024
10 checks passed
@SandroPreuss1234
Copy link

SandroPreuss1234 commented Jun 21, 2024

@MajesticPotatoe I might need a poke in right direction here to perfect this one. Because there is some css-issues still. For example in my repro I use a v-select. The items in the v-select gets dark background color and with darkened text. So there is some more to throw at this one.

@joelmandell
I use :menu-props="{ attach: getAppRoot() }" on the v-select, to attach the menu to my Shadow Root. I realized the same issue with the darkened text and Chrome dev tools gave me a hint. The CSS variable --v-theme-overlay-multiplier is not defined, which is used in some calculations. Not sure why it is lost and if it has to do with the teleport.
But I was able to solve this by defining some custom CSS override, which works for my use case.

.v-menu .v-list {
  --v-theme-overlay-multiplier: 1
}

Just want to let you know. 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VOverlay VOverlay T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.8] v-overlay-container problem with Shadow DOM.
3 participants