petermikitsh/react-shadow-dom.html

## react-shadow-dom.html
<!DOCTYPE html>
<html>
  <head>
    <title>React + Shadow DOM</title>
  </head>
  <body style="margin: 0">
    <global-navigation>
      <div slot="breadcrumbContent" style="color: red">Breadcrumbs</div>
      <div slot="pageContent" style="color: blue">Page Content</div>
    </global-navigation>

    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>

    <script type="text/javascript">
      const MyElement = () => {
        const [count, setCount] = React.useState(1);

        React.useEffect(() => {
          const timer = setInterval(() => {
            setCount((prevCount) => prevCount + 1);
          }, 1000);
          return () => {
            clearInterval(timer);
          };
        }, []);

        return React.createElement("div", {}, [
          "A",
          React.createElement("slot", {
            key: "breadcrumb",
            name: "breadcrumbContent",
          }),
          "B",
          React.createElement("slot", {
            key: "page",
            name: "pageContent",
          }),
          "C",
          React.createElement("div", { key: "livecount" }, count),
        ]);
      };

      window.customElements.define(
        "global-navigation",
        class MyOuterStuff extends HTMLElement {
          connectedCallback() {
            const shadow = this.attachShadow({ mode: "open" });
            shadow.innerHTML = `
              <style>
                ::slotted([slot="pageContent"]) {
                  padding: 16px;
                }
              </style>
            `;

            const mount = document.createElement("div");
            shadow.appendChild(mount);
            ReactDOM.render(React.createElement(MyElement), mount);
          }
        }
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>React + Shadow DOM</title>
	</head>
	<body style="margin: 0">
	<global-navigation>
	<div slot="breadcrumbContent" style="color: red">Breadcrumbs</div>
	<div slot="pageContent" style="color: blue">Page Content</div>
	</global-navigation>

	<script
	crossorigin
	src="https://unpkg.com/react@17/umd/react.development.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
	></script>

	<script type="text/javascript">
	const MyElement = () => {
	const [count, setCount] = React.useState(1);

	React.useEffect(() => {
	const timer = setInterval(() => {
	setCount((prevCount) => prevCount + 1);
	}, 1000);
	return () => {
	clearInterval(timer);
	};
	}, []);

	return React.createElement("div", {}, [
	"A",
	React.createElement("slot", {
	key: "breadcrumb",
	name: "breadcrumbContent",
	}),
	"B",
	React.createElement("slot", {
	key: "page",
	name: "pageContent",
	}),
	"C",
	React.createElement("div", { key: "livecount" }, count),
	]);
	};

	window.customElements.define(
	"global-navigation",
	class MyOuterStuff extends HTMLElement {
	connectedCallback() {
	const shadow = this.attachShadow({ mode: "open" });
	shadow.innerHTML = `
	<style>
	::slotted([slot="pageContent"]) {
	padding: 16px;
	}
	</style>
	`;

	const mount = document.createElement("div");
	shadow.appendChild(mount);
	ReactDOM.render(React.createElement(MyElement), mount);
	}
	}
	);
	</script>
	</body>
	</html>