How to use a shadow DOM element as the reference element?

[RajeshKumarS]

I would like to use Alwan color picker inside within a custom web component. One of the shadow DOM element has to be used as the reference element. Is it possible and if so, how to pass the reference element (as the 1st argument)?

[Jethro]

It should be fixed now.
You can set the reference element as a shadow DOM element.

const alwan = new Alwan(shadowRoot.querySelector('reference-selector'));

[RajeshKumarS]

Thanks. It works now.

[RajeshKumarS]

There appears to be some issue with the widget display when popover is set to false. Works well when popover is true (default).

[Jethro]

I think it's because of the CSS in the global scope, put the CSS inside the shadow DOM.

[RajeshKumarS]

Thanks. Will try.