# react-shadow
> Utilise Shadow DOM in React with all the benefits of style encapsulation.
Latest version **20.6.0** (published 2025-01-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-shadow
pnpm add react-shadow
yarn add react-shadow
bun add react-shadow
```
## Health
**Score 40/100 (D)** — status: maintenance-mode.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 20.6.0 |
| Published | 2025-01-09 |
| First published | 2015-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 303 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1380 |
| Author | Adam Timberlake |
| Maintainers | wildhoney |
## Links
- npm: https://www.npmjs.com/package/react-shadow
- Repository: https://github.com/Wildhoney/ReactShadow
- Homepage: https://github.com/Wildhoney/ReactShadow#readme
- Issues: https://github.com/Wildhoney/ReactShadow/issues
- npm.io page: https://npm.io/package/react-shadow
## Dependencies (1)
- [humps](https://npm.io/package/humps.md) ^2.0.1
## Recent versions
- 20.6.0 (latest) — 2025-01-09
- 20.5.0 — 2024-06-20
- 20.4.0 — 2023-07-21
- 20.3.0 — 2023-06-29
- 20.2.0 — 2023-06-12
- 20.1.0 — 2023-06-11
- 20.0.0 — 2022-12-21
- 19.1.0 — 2022-12-21
- 19.0.3 — 2022-04-08
- 19.0.2 — 2021-01-30
- 19.0.1 — 2020-12-14
- 19.0.0 — 2020-12-14
- 18.6.2 — 2020-12-01
- 18.6.1 — 2020-11-18
- 18.6.0 — 2020-11-18
- … 69 more at https://npm.io/package/react-shadow/versions
## README
> Utilise Shadow DOM in React with all the benefits of style encapsulation.
- **npm**: `npm i react-shadow`
- **yarn**: `yarn add react-shadow`
- **Heroku**: [https://react-shadow.herokuapp.com/](https://react-shadow.herokuapp.com) ([alternative](https://react-shadow-2.herokuapp.com))
---
## Getting Started
Creating the [shadow root](https://www.w3.org/TR/shadow-dom/) is as simple as using the default export to construct a shadow root using the node name provided – for example `root.div` would create a `div` as the host element, and a shadow root as its immediate descendant — all of the child elements would then be descendants of the shadow boundary.
```jsx
import root from 'react-shadow';
import styles from './styles.css';
export default function Quote() {
return (
There is strong shadow where there is much light.
― Johann Wolfgang von Goethe.
);
}
```
[](https://codesandbox.io/s/react-shadow-by6bo?fontsize=14)
Applying styles requires either applying the styles directly to the component as a string, or importing the CSS documents as a string as part of your build process. You can then append the `style` component directly to your shadow boundary via your component's tree. In [the example](https://github.com/Wildhoney/ReactShadow/tree/master/example) we use the following Webpack configuration to import CSS documents as strings.
```javascript
{
test: /\.css$/,
loader: ['to-string-loader', 'css-loader']
}
```
Alternatively you can use [`styled-components`](https://www.styled-components.com/) normally, as each time a shadow boundary is created, a new `StyleSheetManager` context is also created which will encapsulate all related styles in their corresponding shadow root — to use this `import react-shadow/styled-components` instead of `import react-shadow`, likewise if you'd like to use [`emotion`](https://emotion.sh/docs/styled) you can `import react-shadow/emotion`.
```javascript
import root from 'react-shadow/styled-components';
import root from 'react-shadow/emotion';
// ...
;
```
You may pass any props you like to the `root.*` component which will be applied directly to the host element, including event handlers and class names. There are also a handful of options that are used for the `attachShadow` invocation.
```javascript
ShadowRoot.propTypes = {
mode: PropTypes.oneOf(['open', 'closed']),
delegatesFocus: PropTypes.bool,
styleSheets: PropTypes.arrayOf(
PropTypes.instanceOf(globalThis.CSSStyleSheet),
),
children: PropTypes.node,
};
ShadowRoot.defaultProps = {
mode: 'open',
delegatesFocus: false,
styleSheets: [],
children: null,
};
```
In cases where you need the underlying element and its associated shadow boundary, you can use a standard `ref` which will be invoked with the host element – from that you can use `shadowRoot` to access its shadow root if the `mode` has been set to the default `open` value.
```javascript
const node = useRef(null);
// ...
;
```
Recently and at long last there has been some movement in introducing a [declarative shadow DOM](https://tomalec.github.io/declarative-shadow-dom/) which `react-shadow` _tentatively_ supports – as it's experimental, open to sudden spec changes, and React finds it difficult to rehydrate – by using the `ssr` prop.
```javascript
const node = useRef(null);
// ...
;
```
---
_Source: https://npm.io/package/react-shadow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._