danieldietrich/.gitignore

## .gitignore
.cache
dist
node_modules

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Shadow dom component</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

## index.js
import React from "react";
import { render } from "react-dom";
import Style from "./style";

import ShadowDom from "./shadow-dom";

function Demo() {
  return (
    <React.Fragment>
      <Style>{`h2 { color: steelblue; }`}</Style>
      <h2>Outer text</h2>

      <ShadowDom>
        <Style>{`
            :host { padding: 0.5rem 1rem; background: antiquewhite; }
            h2 { color: palevioletred; }
        `}</Style>
        <h2>Shadow dom text</h2>
      </ShadowDom>

    </React.Fragment>
  );
}

render(<Demo />, document.getElementById("app"));

## package.json
{
  "name": "react-shadow-dom",
  "version": "1.0.0",
  "module": "dist/index.js",
  "scripts": {
    "build": "parcel build index.html",
    "start": "parcel serve index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  },
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

## shadow-dom.js
import React from "react";
import { createPortal } from "react-dom";

export default class ShadowDom extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.ref = React.createRef();
  }

  componentDidMount() {
    const shadowRoot = this.ref.current.attachShadow({ mode: "open" });
    this.setState({ shadowRoot });
  }

  render() {
    return (
      <div ref={this.ref}>
        {this.state.shadowRoot
          ? createPortal(this.props.children, this.state.shadowRoot)
          : null}
      </div>
    );
  }
}

## style.js
import React from "react";

export default function Style({ children }) {
  return <style dangerouslySetInnerHTML={{ __html: children }} />;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Shadow dom component</title>
	<style>
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	<script src="index.js"></script>
	</body>
	</html>
	import React from "react";
	import { render } from "react-dom";
	import Style from "./style";

	import ShadowDom from "./shadow-dom";

	function Demo() {
	return (
	<React.Fragment>
	<Style>{`h2 { color: steelblue; }`}</Style>
	<h2>Outer text</h2>

	<ShadowDom>
	<Style>{`
	:host { padding: 0.5rem 1rem; background: antiquewhite; }
	h2 { color: palevioletred; }
	`}</Style>
	<h2>Shadow dom text</h2>
	</ShadowDom>

	</React.Fragment>
	);
	}

	render(<Demo />, document.getElementById("app"));
	{
	"name": "react-shadow-dom",
	"version": "1.0.0",
	"module": "dist/index.js",
	"scripts": {
	"build": "parcel build index.html",
	"start": "parcel serve index.html"
	},
	"devDependencies": {
	"parcel-bundler": "^1.11.0"
	},
	"dependencies": {
	"react": "^16.7.0",
	"react-dom": "^16.7.0"
	}
	}
	import React from "react";
	import { createPortal } from "react-dom";

	export default class ShadowDom extends React.Component {
	constructor() {
	super();
	this.state = {};
	this.ref = React.createRef();
	}

	componentDidMount() {
	const shadowRoot = this.ref.current.attachShadow({ mode: "open" });
	this.setState({ shadowRoot });
	}

	render() {
	return (
	<div ref={this.ref}>
	{this.state.shadowRoot
	? createPortal(this.props.children, this.state.shadowRoot)
	: null}
	</div>
	);
	}
	}
	import React from "react";

	export default function Style({ children }) {
	return <style dangerouslySetInnerHTML={{ __html: children }} />;
	}