Styles are not applied correctly for elements using shadow DOM.

[bramkragten]

Reduced Test Case

https://codepen.io/bramkragten/pen/GRBqxvQ

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

No connector (vanilla JS)

Bug Description

The styles are added to the global documents head, these styles will not apply to shadow dom's. So if a fullcalendar instance is used inside a shadow dom, it will miss the required styles.

Solution

Introduce a new option, root:

root?: Document | ShadowRoot
If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.

If root is provided, add the styles to that root instead of the global document.

[acerix]

There's a related issue here although I'm not sure it's still relevant.

#5884

[steverep]

That issue is basically the opposite problem since @fontface needs to be outside the shadow per their workaround. Since everything is injected to document.head now, that shouldn't be an issue anymore if I'm understanding correctly.

This issue is much more significant as it affects all styles. Getting rid of users having to manually import stylesheets was a breaking change when using a calendar inside a shadow DOM. Before it was possible to just import the styles and include them in the right spot manually.

I would hope this would be an easy fix to just append the styles to calendarElement.getRootNode() instead of assuming the root is document.

[acerix]

Thanks for the details. As a workaround for now, you could copy the styles from the DOM like this:

https://codepen.io/acerix/pen/mdjOoNB?editors=0010

[arshaw]

Queued for release: 1dfc957

[arshaw]

Works since v6.1.0

https://codepen.io/arshaw/pen/zYLJeRx?editors=0010

[SimmeNilsson]

@arshaw But aren't the styles applied to both main document and shadow DOM in your codepen?
Also, if I manually delete the first style block in head of main document, the grid lines disappear from the calendar.

[arshaw]

@SimmeNilsson I'd need to investigate further. Can you please create a new ticket?

[SimmeNilsson]

@arshaw Thanks! Created a new one.