/preact-shadow-root

🕴 Render a Preact subtree into the Shadow DOM.

Primary LanguageJavaScript

preact-shadow-root

A tiny <Shadow> component that renders its children into the Shadow DOM.

🔥 JSFiddle Demo

Usage

import Shadow from 'preact-shadow-root'

const Demo = () => (
  <div class="foo">
    <Shadow>
      <div class="foo">
        I am rendered into the Shadow DOM.
        <style>{`
          .foo {
            border: 2px solid red;
          }
        `}</style>
      </div>
    </Shadow>
  </div>
)

In the above demo, only the <div class="foo"> within <Shadow> will be given a red border.

License

MIT License © Jason Miller