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

Shadow DOM support #753

Open
wants to merge 4 commits into
base: old
Choose a base branch
from
Open

Shadow DOM support #753

wants to merge 4 commits into from

Conversation

Rigidoont
Copy link

This pull request should resolve #346.

Using v-tooltip in Shadow DOM results in incorrect behavior such as inability of a tooltip to close itself. The reason is in a check in _scheduleHide method of Tooltip class that ensures tooltip's node is in the DOM, while not accounting for nodes located in Shadow DOM:

// src/lib/tooltip.js, _scheduleHide method
if (!this._tooltipNode.ownerDocument.body.contains(this._tooltipNode)) { // only works for normal DOM nodes
       return
}

Instead, I added a utility function that accounts for Shadow DOM isInDocument(element) to src/utils.js and used it in _scheduleHide.

Also, I made it possible to provide a callback to the container property, so that the container can be resolved dynamically at the moment the tooltip opens. It is useful as the shadowRoot's content is not queryable using document.querySelector(), so providing a selector is not an option in that case.

Updated types and README accordingly.

// types/index.d.ts
defaultContainer: string | HTMLElement | false // before
defaultContainer: string | HTMLElement | false | ((targetElement: Element) => Element) // after

Next, I changed a line in the Popover.vue as stated in #346.

const contains = popover.$refs.popover.contains(event.target) // before
const contains = popover.$refs.popover.contains(event.composedPath()[0]) // after

These are all the changes made to the library, though I also created a couple of components in docs-src app under shadow folder. I included them into PageHome.vue while development to reproduce the tooltip's behavior in Shadow DOM, but later commented it out. So in case anything breaks or requires further improvement, the Shadow DOM showcase can easily be set up again.

@larryval
Copy link

larryval commented Apr 4, 2023

I have a Vue.JS project that is 100% loaded in the shadowdom, and this pull request, thank's to Gidoont, seems to solve some problems (auto-hide among others), do you think this old pull request has a chance of being validated? I hope so ;)

@JRonde
Copy link

JRonde commented Sep 13, 2023

Same here. I need to use floating-vue in the Shadow DOM as well. If this branch provides Shadow DOM support, can it be reviewed and merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support Shadow DOM
3 participants