[Bug Report] Weird behaviour inside shadow DOM

Versions and Environment

Vuetify: 1.5.14 Vue: 2.6.10 Browsers: Google Chrome OS: Linux x86_64

Steps to reproduce

1. Render vuetify inside shadow dom
2. Functionality becomes very limited, such as:

• Cannot focus for text fields
• Menuable items cannot be attached to VApp
• Menuable items cannot be attached by selectors

Expected Behavior

Clicking on the text field should show that the text field is focused The select list should work even without attach property

Actual Behavior

The text field does not react on clicks or activating via tab The select list does not open without attach property

Reproduction Link

https://codepen.io/anon/pen/rEjXRj

Other comments

Possible culprit:

• document.activeElement inside of onFocus in VTextField does not work in shadow dom
• document.querySelector does not work in shadow dom

Possible solutions:

• calculate actual root with getRootNode (might require polyfill on Edge and IE11)
• track VApp and use querySelector directly on the VApp element

I could not find any workarounds that vuetify can offer for this issue at this moment.

[KaelWD]

There are no plans currently to support web components

See also #4075, #5054, #6203

[matthieusieben]

There are other consideration than only the use of document. For example, the use of rem css units will prevent overriding the font-size of elements inside the shadow dom.

I don’t expect the Vuetify team to implement these changes in Vuetify 2.x (although it would be nice). But you guys should consider this when writing Vuetify 3. IMO, a proper framework should not assume that it is the only think running on the page and allow to be scoped to a particular DOM element.