use-shadow-dom-react

useShadow

Install

npm i use-shadow-dom

Import

import useShadow from 'use-shadow-dom'

Usage

function App() {
  // this element will be rendered in shadow dom.
  // and element will never rerender
  const element = useShadow(<MyComponent />)

  return (
    <div className="App">
      {element}
    </div>
  )
}

function MyComponent() {
  return <div>Hello world</div>
}

If you pass some props(eg. your custom css) to your component without do anything, the component will not rerender. The component just like be memorized. you can tell useShadow your dependencies by pass dependencyList as second params:

const element = useShadow(<MyComponent count={count} />, [count])

When count changed, useShadow will return a new element.

Hook API

Value	Type	Default	Description
Component	ReactNode	-	The component you want to attach to shadow dom.
deps	DependencyList	[]	The dependencies that control component updates.
opts	Options	-	See Options API below.

Options API

Value	Type	Default	Description
shadowRootInit	ShadowRootInit	{ mode: 'open' }	the params for attachShadow
styleContent	string	Inline style string in shadow dom
styleSheets	string[]	Inline static css files in shadow dom, the base url is your root path.