Usage with styled-components

[wildhoney]

Usage with styled-components

[mitchheddles]

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>

[Wildhoney]

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.

[xdumaine]

I'm having the same issue with just using react inline styles, which also applies the stylesheet to the root.

[Wildhoney]

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.

[xdumaine]

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.

[Wildhoney]

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.

[Wildhoney]

@xdumaine please raise a separate ticket if you haven’t yet found a solution 👍