Is there a way to avoid slot wrapper?

[osbre]

Hi. Thank you for this great component!

But, it makes additional <div> on top of my slot content.

Question: Is there a way to avoid this? (Use default slot directly, not in the wrapper)

Thanks!

https://github.com/valgeirb/vue3-popper/blob/9306f8d4a1842b41c1afa49c7d7e371bc0c7a420/src/component/Popper.vue#L3-L15

[valgeirb]

Is the extra div causing problems? I could try moving all the events etc. to the outermost div - I'll let you know how that goes 👍🏻

[osbre]

In my case, it causes problems with styles BTW thanks for reaching out

[valgeirb]

This is causing some unwanted issues, what is your styling problem exactly?

[timmaier]

I also found an issue with styles in particular the elements inside the Popper would no longer take on the full width of the parent element.

[valgeirb]

@timmaier Yes, the default slot of the Popper is wrapped with an inline-block, this is so that you can't activate the Popper when clicking "outside" of the wrapped element.

Here's a demo with the inline-block style removed (so that the element takes up the full width of the parent element) with some borders to make things clearer:

I just feel that this could confuse people and you can always add width: 100% to your button to make it full width.

That said, if you have any suggestions I'm all ears 👍🏻

Edit: All that said, the class="inline-block" should probably be on the outermost div, I'll poke at this some more...

[thplat]

Sorry for hijacking this issue, but a way of getting rid of the wrapper, or at least defining the tag of the wrapper would be much appreciated. I have a use case where user generated content comes from a database. The content contains HTML and is wrapped in

tags. Inside of the content I am transforming parts of it to render popovers, however since vue3-popper renders a div, and a div is invalid within paragraphs, it leads to hydration issues in a SSR context.

[ThorntonStuart]

Was there any solution to this one? I think the ability to apply modifiers - specifically the applyStyles (https://popper.js.org/docs/v2/modifiers/apply-styles/) - would be helpful here in allowing users to override the class="inline-block".

Unfortunately the class="inline-block" seems to have an arbitrary width in my use case and doesn't respond to the 100% width of it's immediate child, nor extend to the width of it's parent.