ld-select doesn't work when embedded inside a custom element

[dpitois]

Bug description

We are using the Liquid elements to build custom elements using Preact and publish them with ViteJS as library.
When designing the component without packaging it as a library, the <ld-select /> behavior seems fine.
We are wrapping our component using shadow root element open, our goal is to keep each custom element isolated from other one, as a fallback we can omit that shadow root but as a result other elements on our pages are messed with styles*.
(* style messing is not illustrated in the below repro-sandbox)

Steps to reproduce the behavior

Repro codesandbox: https://codesandbox.io/p/github/dpitois/liquid-selects/

1. Go to the repro sandbox
2. Click on any of the selects from the Preact app section, the options are display
3. Click on any of the selects from the Preact custom element section, the options are not display

Note: we try to use Liquid elements as web component and with React bindings

• src/component/Custom.tsx uses Liquid with direct import of web component
• src/component/CustomReact.tsx uses Liquid React bindings

Expected behavior

When wrapping Liquid elements inside custom elements the options should be display

Actual behavior

Options seem to be created in the DOM but the popper does not display them when wrapped inside a custom element.

Screenshots

ld-select used inside a Preact app (bootstraped with ViteJS)

ld-select used inside a Preact custom element (bootstraped with ViteJS)

Details about device, OS, browser (including versions)

• Device: Windows PC
• OS: Windows 10
• Browser: Chrome
• Version: 108

We can move the reported issue as a Github discussion or Teams conversation, with internal tools we might give more specific context about the use case and how we reach the issue.

[borisdiakur]

🎉 This issue has been resolved in version 4.1.11 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀