Fix the code so that the color picker is inside a shadow dom

[Agog-io]

Currently implementing this in a project where all functionality is inside a shadow dom. There are several querySelectors calls in this project that are done with document.querySelector , and if the color picker attached inside a shadow dom they fail cause the shadow dom elements are not visible this way.

I would suggest having something like this , where the domTree option defaults to document if not set , and modifying the library querySelectors accordingly. I am down to creating a pull request for this as I will definitely be implementing this in the proj i am working on .

//shadowDomRoot <---  ShadowRoot
//shadowDomInputEl <---  Input Element inside shadowDomRoot
//shadowDomParentEl <---  ParentEl inside shadowDomRoot
Coloris({
	el: shadowDomInputEl,
	parent: shadowDomParentEl,
	inline: true,
	wrap: false,
        //new Option
       domTree : shadowDomRoot
});

[mdbassit]

Hmm, I'm not sure it's possible to make this compatible with shadow DOM without a significant changes to the code base. If you are able to make it work, could I take a look at your code?

[Agog-io]

Indeed , I have made it work for a very specific case where I attach the colorpicker inline inside a shadow dom (works fine with like 4 lines of code modified).

I will be sharing a pr with the changes (hopefully this week)