Skip to content

[Bug Report][3.6.8] v-overlay-container problem with Shadow DOM. #19943

Closed
@joelmandell

Description

Environment

Vuetify Version: 3.6.8
Vue Version: 3.4.27
Browsers: Safari 17.5
OS: Mac OS 10.15.7

Steps to reproduce

If you run an http-server in the folder repro you can find the thing that is not working.
We use bootstrap in an ASP.NET MVC Web app. But the CSS interferes between vuetify and bootstrap. I have partly solved it by mounting it on shadow dom.

Expected Behavior

Expect v-overlay-container to be attached in the shadow dom so it would work with css isolation.

Actual Behavior

The v-overlay-container is attached to document.body instead. And you can find the items for v-select below on the page when you scroll down after clicking v-select.

Reproduction Link

https://github.com/joelmandell/shadow_dom

Other comments

I might fix an PR for this if I find the time and can find out why it behaves like this.
For the moment this is a show stopper of our usage and progressive migration over to vuetify 3.
We need it to work in shadow dom.

Metadata

Assignees

No one assigned

    Labels

    C: VOverlayVOverlayT: bugFunctionality that does not work as intended/expected

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions