React grid component don't render properly under shadow-dom.

[AndreyLuzinov]

I'm submitting a

• Bug report

Current behavior

When I render grid from sample code snippet under shadow root component I've got this:

Expected behavior

If I remove shadow root I get this:

Minimal reproduction of the problem with instructions

Just place grid with filters under shadow dom.

What is the motivation or use case for changing the behavior?

Shadow dom is increasing trend. You should follow it.

[Xizario]

Are you using react-shadow-root? If this is the case, loading the styles using link as shown in their documentation should work for our theme as well.

[AndreyLuzinov]

The real problem is that WebComponentsIcons font are not working inside shadow-dom. If I attach all.css kendo react styles into root html document then all works fine but if I do the same inside my shadow-root component then icons are broken like on provided images. Please help.

[Xizario]

@telerik/kendo-react-team, some ideas here?

[AndreyLuzinov]

Looks like it's browser issue not library specific. font-face are not working when declared inside shadow-dom.

[simonssspirit]

Yes, currently there are limitations for the font icons used in the shadow dom:

https://stackoverflow.com/questions/28794189/icon-fonts-in-shadow-dom

[mathiasmah]

A feasible solution for us would be to include only the iconsets outside of the shadow-dom, this way the icons would also be available inside the shadow-dom. Is it possible to receive a css file that only contains the icon fonts?

[kdikov82]

Switching to the SVG icons