# react-shadow-root

> Adds a shadow root to React components

Latest version **6.2.0** (published 2022-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shadow-root
pnpm add react-shadow-root
yarn add react-shadow-root
bun add react-shadow-root
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.2.0 |
| Published | 2022-03-30 |
| First published | 2018-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 73 |
| Author | Alan Pearce |
| Maintainers | apearce |
| Keywords | React, Shadow DOM, Shadow Root |

## Links

- npm: https://www.npmjs.com/package/react-shadow-root
- Repository: https://github.com/apearce/react-shadow-root
- Homepage: https://github.com/apearce/react-shadow-root#readme
- Issues: https://github.com/apearce/react-shadow-root/issues
- npm.io page: https://npm.io/package/react-shadow-root

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 6.2.0 (latest) — 2022-03-30
- 6.1.1 — 2021-11-29
- 6.1.0 — 2021-09-13
- 6.0.0 — 2021-09-13
- 5.0.4 — 2021-02-23
- 5.0.3 — 2020-08-03
- 5.0.2 — 2020-04-04
- 5.0.1 — 2019-11-17
- 5.0.0 — 2019-11-17
- 4.1.0 — 2019-09-13
- 4.0.1 — 2019-09-12
- 4.0.0 — 2019-09-10
- 3.1.0 — 2019-09-05
- 3.0.0 — 2019-09-04
- 2.0.0 — 2018-12-20
- … 6 more at https://npm.io/package/react-shadow-root/versions

## README

# react-shadow-root
Lets you add a shadow root to React components allowing you to use the shadow DOM. This provides scoped CSS and includes support for [constructable](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) [stylesheets](https://wicg.github.io/construct-stylesheets).

## Installation
`npm install --save react-shadow-root`

## Examples
https://apearce.github.io/react-shadow-root/

## ReactShadowRoot
### Usage
```jsx
import React from 'react';
import ReactShadowRoot from 'react-shadow-root';

class ShadowCounter extends React.Component {
  state = { cnt: 0 };

  increment = () => {
    this.setState({
      cnt: this.state.cnt + 1
    });
  }

  render() {
    const style = `span {
      background-color: #333;
      border-radius: 3px;
      color: #fff;
      padding: 1px 5px;
    }
    button {
      background-color: #fff;
      border: 1px solid currentColor;
      border-radius: 3px;
      color: #333;
      cursor: pointer;
      outline: 0;
    }
    button:active {
      background-color: #333;
      color: #fff;
    }`;

    return (
      <div> {/* The shadow root will be attached to this DIV */}
        <ReactShadowRoot>
          <style>{style}</style>
          <span>{this.state.cnt}</span> <button onClick={this.increment}>Click Me</button>
        </ReactShadowRoot>
      </div>
    );
  }
}
```
When the shadow root is created on its parent element, all children are copied into the shadow DOM. Styles in the shadow DOM are automatically scoped. You can inspect the element to confirm. [Slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) work as expected; just be sure to add `{this.props.children}` _after_ the closing `ReactShadowRoot` tag.

### Static Properties
| Name | Description |
|------|-------------|
| `constructableStylesheetsSupported` | A boolean telling you if constructable stylesheets are supported by the browser. |
| `constructibleStylesheetsSupported` | An alias of `constructableStylesheetsSupported` using the ['correct' spelling](https://github.com/WICG/construct-stylesheets/issues/90). |
| `shadowRootSupported` | A boolean telling you if attaching a shadow root is supported by the _browser_, not the element. |

### Props
| Prop | Type | Values | Default | Description |
|------|------|--------|---------|-------------|
| `declarative` | `Boolean` | `true` or `false` | `false` | Creates a [Declarative Shadow Root](https://apearce.github.io/react-shadow-root/#declarative) |
| `delegatesFocus` | `Boolean` | `true` or `false` | `false` | Expands the focus behavior of elements within the shadow DOM. Click [here](https://apearce.github.io/react-shadow-root/#delegates-focus) for more information. |
| `mode` | `String` | `open` or `closed` | `open` | Sets the [mode](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode) of the shadow root. |
| `stylesheets` | `Array` | `arrayOf(CSSStyleSheet)` | optional | Takes an array of [CSSStyleSheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) objects for constructable stylesheets. |

## Notes
- A minimum of React 16 is required.
- TypeScript definitions included and should not require configuration
- Works in all modern browsers except non-Chromium Edge. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Browser_compatibility) for current browser support.
- Not all HTML elements allow you to attach a shadow root. Click [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Elements_you_can_attach_a_shadow_to) for more information.
- It has been tested with the Context API introduced in React 16.3.0 and it worked fine. It has not been tested with the previous API.

---
_Source: https://npm.io/package/react-shadow-root · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._