Comments (7)
I had a similar issue, but got around it by following this thread.
I delay rendering of the children to avoid FOUC.
Demo:
import React from 'react';
import root from 'react-shadow';
// We need to use StyleSheetManager to catch and styled components and target them a node inside
// of the shadow DOM. Otherwise they will be on the document, therefore excluded.
import { StyleSheetManager } from 'styled-components';
// This component is used to determine if the shadow root children have been mounted,
// we can't assume they are mounted with the parent and using a timer is risky.
const DidMount = ({ onMount }) => {
React.useEffect(onMount, []);
return null;
};
export const MyShadowComponent = ({ children }) => {
const node = React.useRef(null);
const [mounted, setMounted] = React.useState(false);
return (
<root.div>
<div ref={node}>
<DidMount onMount={() => setMounted(true)} />
{mounted && node.current && (
<>
<StyleSheetManager target={node.current}>
<>{children}</>
</StyleSheetManager>
</>
)}
</div>
</root.div>
);
};
Usage:
<MyShadowComponent>
<MyStyledComponent>Hello</MyStyledComponent>
</MyShadowComponent>
from reactshadow.
Sadly styled-components
applies all of its stylesheets to the document root, which means they the styles won't pass through the shadow boundaries. At the moment they don't seem to provide a way to re-target the stylesheets.
from reactshadow.
I'm having the same issue with just using react inline styles, which also applies the stylesheet to the root.
from reactshadow.
I'm having the same issue with just using react inline styles, which also applies the stylesheet to the root.
Like this? As it seems okay.
from reactshadow.
Ahh sorry, we're using react-native-web with inline styles, so all inline styles get compiled to a single stylesheet appended to the document root, instead of truly inlined.
from reactshadow.
Sorry @xdumaine I'm not sure about the library. Maybe others will have an idea.
Awesome solution @mitchheddles β I've implemented that into the core module using your approach starting with v17.2.0
. Any time you create a new shadow boundary now, it also creates a new StyleSheetManager
context so styled-components
should just work without any additional steps.
from reactshadow.
@xdumaine please raise a separate ticket if you havenβt yet found a solution π
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.