search

sefianecho / alwan

A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.
https://sefianecho.github.io/alwan/
MIT License
38 stars 6 forks source link

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

Closed RajeshKumarS closed 3 months ago

RajeshKumarS commented 4 months ago

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)?

sefianecho commented 3 months ago

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 commented 3 months ago

Thanks. It works now.

RajeshKumarS commented 3 months ago

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

sefianecho commented 3 months ago

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

RajeshKumarS commented 3 months ago

Thanks. Will try.