Comments (12)
It actually seems to work for me @goffle 👍
Tested in Chrome and Opera.
from reactshadow.
Should work just fine with the updated version.
from reactshadow.
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.
from reactshadow.
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
.
from reactshadow.
@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?
from reactshadow.
Hmm yep: https://imgur.com/jOjJ8vk
Anything in the console such as the fonts failing to load?
from reactshadow.
Weird @Wildhoney. I'm not seeing any requests to font-awesome. Here's my logs and network tab.
from reactshadow.
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.
from reactshadow.
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
from reactshadow.
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.
from reactshadow.
Is your version of Chrome somewhere around 84.0.4147.105
?
And what happens if you change root.div
to just div
?
from reactshadow.
Chrome is Version 84.0.4147.105 (Official Build) (64-bit). If I change root.div to div, I can see the camera icon.
from reactshadow.
Related Issues (20)
- Can useLayoutEffect() be used instead of useEffect() to make rendering synchronous? HOT 3
- How to use ReactShadow with ChakraUI Drawers? HOT 1
- Is there any chance to have a working example with CRA and TS? HOT 1
- Lib stopped working on iOS 15? HOT 1
- Shadow tree inheriting from parent HOT 2
- Does it support new mui lib?
- [feature request] allow consumers to pass options to emotion
- global requires a polyfill. Shall we replace global with globalThis? HOT 2
- styled-components is not defined as a peer dependency HOT 1
- Update dependency to React 18? HOT 5
- Trouble Loading Custom Font Into Shadow DOM in my Chrome Extension
- template content is empty with react HOT 1
- Example links in readme are both broken
- Children of the shadow root cannot get retrieved at parent level within a useEffect
- Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree HOT 1
- Remove react-use dependency due to package size
- shadowroot has been depricated need to update with shadowrootmode in template element HOT 2
- Next.js v13 failed to build "TypeError: e.createContext is not a function" HOT 1
- Css Variables from External URL link inside of a shadow dom not getting recognized
- Warning: z: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactshadow.