JSPM – @depay/react-shadow-dom@5.0.5

Package Exports

@depay/react-shadow-dom
@depay/react-shadow-dom/dist/esm/index.js
@depay/react-shadow-dom/dist/umd/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@depay/react-shadow-dom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Quick Start

yarn add @depay/react-shadow-dom

import { ReactShadowDOM } from '@depay/react-shadow-dom';

ReactShadowDOM({
  document,
  element,
  content,
  outsideStyle: outsideStyle,
  insideStyle: insideStyle
})

ReactShadowDOM

The function ReactShadowDOM renders a react compontent (content) into an insideContainer that lives inside a shadowRoot of the outsideContainer target element (element) within a given document (document) while also applying insideStyle to the insideContainer and outsideStyle to the outsideContainer.

content

You can either pas a ReactElement to content or a function. In case of a function that function will be call with the insideContainer as an argument and it's expected to return a ReactElement.

styles

While outsideStyle is applied to the outside container directly:

outsideStyle: `
  border: 1px solid red;
  color: black;
`

<div class="ReactShadowDOMOutsideContainer" style="border: 1px solid red;color: black;"></div>

insideStyle is wrapped in a style tag and prepend to the shadowRoot:

insideStyle: `
  .ReactShadowDOMInsideContainer {
    background: blue;
    color: white;
  }
`

#shadow-root
  <style type="text/css">.ReactShadowDOMInsideContainer {background: blue;color: white;}</style>
  <div class="ReactShadowDOMInsideContainer"><h1>I'm in a ShadowDOM</h1></div>

wich allows you to style all elements and classes within the shadowRoot.

classes

insideClasses sets classes on inside container:

insideClasses: ['contained', 'another-class']

#shadow-root
  <div class="ReactShadowDOMInsideContainer contained another-class"><h1>I'm in a ShadowDOM</h1></div>

unmount

In order to completly unmount everything (removing containers and unmounting React components), the ReactShadowDOM function returns an object containing an unmount function:

let { unmount } = ReactShadowDOM(...)

unmount()

Development

Get started

yarn install
yarn demo

Run tests

yarn test:integration

Debug tests

yarn test:cypress:debug 'cypress/integration/ReactShadowDOM.js'

Release

npm publish