Update: adding this.shadow for easy style placement

stevematney · stevematney · commit 1a5c2758acaf · 2021-02-01T16:06:28.000-07:00
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ function Incrementer(): React.ReactElement {
       <button
         id="iterate-button"
         type="button"
-        onClick={(): void => setIncrement(prevIncrement => prevIncrement + 1)}
+        onClick={(): void => setIncrement((prevIncrement) => prevIncrement + 1)}
       >
         Increment
       </button>
@@ -60,6 +60,7 @@ customElements.define('incrementer', ReactTestComponent);
 The key pieces of code are `... extends ReactHTMLElement` and `this.mountPoint`.
 
 > ### Polyfills
+>
 > One thing to remember is that you will need to load [the webcomponentsjs polyfills](https://www.webcomponents.org/polyfills) for `ReactHTMLElement` to work in all browsers. Be sure to include [the ES5 adapter](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#custom-elements-es5-adapterjs), as we currently transpile `ReactHTMLElement` down to ES5. The polyfills should be in the `<head>`, and should look something like this:
 >
 > ```html
@@ -94,9 +95,7 @@ This will allow us to utilize our Web Component as an element in any HTML:
     <script src="./path/to/incrementer.js"></script>
   </head>
   <body>
-    <h1>
-      Behold: An Incrementer
-    </h1>
+    <h1>Behold: An Incrementer</h1>
     <!-- put your web component in your html -->
     <incrementer></incrementer>
   </body>
@@ -134,21 +133,27 @@ customElements.define('incrementer', ReactTestComponent);
 
 Using styled-components with ReactHTMLElement seems tricky, but there's actually a very simple way to implement it: the [`StyleSheetManager`](https://styled-components.com/docs/api#stylesheetmanager). An app rendered with `StyleSheetManager` might look like this:
 
-```react
+```jsx
 class ReactWebComponent extends ReactHTMLElement {
   connectedCallback() {
-    ReactDOM.render((
-      <StyleSheetManager target={this.mountPoint.parentNode}>
+    ReactDOM.render(
+      <StyleSheetManager target={this.shadow}>
         <App />
-      </StyleSheetManager>
-    ), this.mountPoint);
+      </StyleSheetManager>,
+      this.mountPoint
+    );
   }
 }
 ```
 
-We use `this.mountPoint.parentNode` for the styles instead of simply using `this.mountPoint` for the case of unmounting. If stylesheets are a child of `this.mountPoint`, ReactDOM will throw an error when you try to unmount. (`unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.`) This error is a little cryptic, but the bottom line is that ReactDOM expects that everything inside the mounted node was generated by React itself. When we use the same node to place our styles, it breaks that expectation. Using the `parentNode` will cause the styles to be placed within the Shadow DOM, but not inside the same component where our app is mounted.
+`this.shadow` is a getter that will initialize your Web Component, attaching a Shadow
+Root with `{mode: 'open'}`, and setting the Shadow Root's innerHTML to your
+template or `<div></div>`. If this initialization has already occurred, it will
+simply return the previously created Shadow Root.
+
+We use `this.shadow` for the styles instead of simply using `this.mountPoint` because of unmounting. If stylesheets are a child of `this.mountPoint`, ReactDOM will throw an error when you try to unmount. (`unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.`) This error is a little cryptic, but the bottom line is that ReactDOM expects that everything inside the mounted node was generated by React itself. When we use the same node to place our styles, it breaks that expectation. Using the `this.shadow` will cause the styles to be placed as a first-child of the Shadow DOM, but not inside the same component where our app is mounted.
 
-If you're using a [custom template](#thismountpoint-and-using-custom-templates), you can find a node for your `StyleSheetManager` target by searching through the `shadowRoot` in the same way you might search through `document.body`. Often, simply using `this.mountPoint.parentNode` will still work as expected, even with custom templates.
+If you're using a [custom template](#thismountpoint-and-using-custom-templates), you may need to set the target for your `StyleSheetManager` differently. Often, simply using `this.mountPoint.parentNode` will work as expected, even with custom templates, but this will depend on your template. (You may run into competing styles or have a very unusual use-case where placing a `style` tag as a sibling of your application causes some other issue.)
 
 # Contributing
 
diff --git a/src/ReactHTMLElement.ts b/src/ReactHTMLElement.ts
@@ -1,18 +1,32 @@
 import ReactDOM from 'react-dom';
 
 class ReactHTMLElement extends HTMLElement {
+  private _initialized?: boolean;
+
   private _mountPoint?: Element;
 
+  private getShadowRoot(): ShadowRoot {
+    return this.shadowRoot || this.attachShadow({ mode: 'open' });
+  }
+
   private template: string;
 
   private mountSelector: string;
 
+  get shadow(): ShadowRoot {
+    if (this._initialized) return this.getShadowRoot();
+
+    const shadow = this.getShadowRoot();
+    shadow.innerHTML = this.template;
+    this._initialized = true;
+
+    return shadow;
+  }
+
   get mountPoint(): Element {
     if (this._mountPoint) return this._mountPoint;
 
-    const shadow = this.attachShadow({ mode: 'open' });
-    shadow.innerHTML = this.template;
-    this._mountPoint = shadow.querySelector(this.mountSelector) as Element;
+    this._mountPoint = this.shadow.querySelector(this.mountSelector) as Element;
 
     return this._mountPoint;
   }
