@webflow/styled-components-utils

A React utility package for working with styled-components in Shadow DOM environments. This package exposes a provider component that automatically configures styled-components to work correctly within Shadow DOM boundaries.

Installation

npm i @webflow/styled-components-utils

Peer Dependencies

This package requires the following peer dependencies:

npm i styled-components react react-dom

Usage

StyledComponentsShadowDomProvider

The StyledComponentsShadowDomProvider component automatically detects whether it's running inside a Shadow DOM and configures styled-components' StyleSheetManager accordingly. When inside a Shadow DOM, it injects styles into the Shadow Root; otherwise, it falls back to the document head.

Basic Usage

import React from "react";
import { StyledComponentsShadowDomProvider } from "@webflow/styled-components-utils";
import styled from "styled-components";

const StyledButton = styled.button`
  background-color: #007bff;
`;

function MyComponent() {
  return (
    <StyledComponentsShadowDomProvider>
      <StyledButton>Click me!</StyledButton>
    </StyledComponentsShadowDomProvider>
  );
}

With Custom StyleSheetManager Options

You can customize the StyleSheetManager by passing options to the provider:

import React from "react";
import { StyledComponentsShadowDomProvider } from "@webflow/styled-components-utils";
import type { IStyleSheetManager } from "styled-components";

const styleSheetOptions: IStyleSheetManager = {
  namespace: "my-custom-namespace",
  disableCSSOMInjection: false,
  // Other StyleSheetManager options...
};

function MyApp() {
  return (
    <StyledComponentsShadowDomProvider options={styleSheetOptions}>
      {/* Your styled components */}
    </StyledComponentsShadowDomProvider>
  );
}

API Reference

StyledComponentsShadowDomProvider

Props

| Prop | Type | Required | Description | | ---------- | -------------------- | -------- | -------------------------------------------------------------- | | children | React.ReactNode | Yes | The React components that will use styled-components | | options | IStyleSheetManager | No | Custom options to pass to styled-components' StyleSheetManager |

Default StyleSheetManager Options

{
  disableCSSOMInjection: true,
  // target is automatically determined based on DOM context
}

License

MIT