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.

$3

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.

$3

While outsideStyle is applied to the outside container directly:
`
outsideStyle:
border: 1px solid red;
color: black;

`
`



`

insideStyle is wrapped in a style tag and prepend to the shadowRoot:
`
insideStyle:
.ReactShadowDOMInsideContainer {
background: blue;
color: white;
}

`
`
#shadow-root




`

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

$3

insideClasses sets classes on inside container:
`
insideClasses: ['contained', 'another-class']
`
`
#shadow-root



`

$3

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

`javascript

let { unmount } = ReactShadowDOM(...)

unmount()

`

Development

$3

`
yarn install
yarn demo
`

$3

`
yarn test:integration
`

$3

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

$3

`
npm publish
``