ShadowDOM Support Broken

[dartanian300]

In the commit "fixed default context option" (493bf006436250453ac24e2a1dfbe46d798676c8) the changes made broke shadow dom support. We're currently using this date picker in the shadow dom and the picker is now added to the global document of the page instead of the shadow dom.

The following change in src/js/render.js is the root of the issue.

-   instanceOptions.context.appendChild(calendarDiv);
+   document.body.appendChild(calendarDiv);

This change was originally intended to allow the date picker to be added to any element rather than only the document root. This would allow the picker to be used in shadow dom as well as inside iframes and other areas that aren't in the global document.

Is there a way this functionality can be reinstated?

[mikecoj]

Hi,

This change was made because MCDatepicker uses one calendar node for all calendar instances.

Before this commit, the calendar node was added only to the context of the first instance.

For example: if you have 2 instances, the first one using document.body as context and the second one shadow root, in this case, MCDatepicker will append the calendar node only to the document.body (the context of the first instance). The second instance will use its context just to search the node with the id specified in the el option and add a listener to it.

[dartanian300]

I see. In order to fully support shadow dom the element would need to be inserted there.

Perhaps the package can be modified so that a date picker is inserted into each context? That way you maintain support for multiple pickers while also supporting shadow dom.

[mikecoj]

Yes, I think it's a good idea!

[vinoth2442]

Hi @mikecoj any update about this shadow dom support? This issue can be fixed adding one more options to append the picker to the given Element. Ex: appendTo : shadowEle

[mikecoj]

Hi there, unfortunately, there are no updates on this.

Due to my involvement in other big projects, I had to dedicate more time to them and less time to this one. I hope this will change soon.

If you've found the solution, I'll be happy to receive a PR from you.

Thank you!