Make font works in shadow dom

[wildhoney]

Make font works in shadow dom

[Wildhoney]

It actually seems to work for me @goffle 👍

Tested in Chrome and Opera.

[Wildhoney]

Should work just fine with the updated version.

[wontwon]

I can't quite figure out how to get font-awesome to import correctly into my shadow dom. I tried using the same code as above, but was unsuccessful.

[Wildhoney]

You just need to import the CSS document into the shadow root: https://codesandbox.io/s/dark-voice-snrrc?file=/src/App.js

Op's code is from an older version of react-shadow.

[wontwon]

@Wildhoney Thanks for your quick response! I'm not sure if the link you sent me is working. This is what I am currently seeing when I open your link.

Do you see something different?

[Wildhoney]

Hmm yep: https://imgur.com/jOjJ8vk

Anything in the console such as the fonts failing to load?

[wontwon]

Weird @Wildhoney. I'm not seeing any requests to font-awesome. Here's my logs and network tab.

[wontwon]

Can confirm. Had a friend open your link @Wildhoney on his machine and just a squared showed instead of the icon. Not sure whats going on.

[Wildhoney]

Sorry maybe it's because I put class instead of className? Although still strange how it showed for me.

Is this any better: https://codesandbox.io/s/pedantic-colden-h6qtt

[ivnmaksimovic]

Using Chrome browser, I can see only square on this link https://codesandbox.io/s/pedantic-colden-h6qtt. And I do see font downloaded successfully in network tab. But just tried in Safari and I can see the camera icon.

[Wildhoney]

Is your version of Chrome somewhere around 84.0.4147.105?
And what happens if you change root.div to just div?

[ivnmaksimovic]

Chrome is Version 84.0.4147.105 (Official Build) (64-bit). If I change root.div to div, I can see the camera icon.