Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-shadow-root

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-shadow-root

Adds a shadow root to React components

  • 6.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13K
decreased by-33.45%
Maintainers
1
Weekly downloads
 
Created
Source

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 stylesheets.

Installation

npm install --save react-shadow-root

Examples

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

ReactShadowRoot

Usage

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 work as expected; just be sure to add {this.props.children} after the closing ReactShadowRoot tag.

Static Properties

NameDescription
constructableStylesheetsSupportedA boolean telling you if constructable stylesheets are supported by the browser.
constructibleStylesheetsSupportedAn alias of constructableStylesheetsSupported using the 'correct' spelling.
shadowRootSupportedA boolean telling you if attaching a shadow root is supported by the browser, not the element.

Props

PropTypeValuesDefaultDescription
declarativeBooleantrue or falsefalseCreates a Declarative Shadow Root
delegatesFocusBooleantrue or falsefalseExpands the focus behavior of elements within the shadow DOM. Click here for more information.
modeStringopen or closedopenSets the mode of the shadow root.
stylesheetsArrayarrayOf(CSSStyleSheet)optionalTakes an array of 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 for current browser support.
  • Not all HTML elements allow you to attach a shadow root. Click here 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.

Keywords

FAQs

Package last updated on 30 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc