Merge pull request #10 from WTW-IM/styled-components-docs

Docs: adding some instructions around Styled Components

Author: stevematney

README.md

@@ -130,6 +130,26 @@ class IncrementerComponent extends ReactHTMLElement {
 customElements.define('incrementer', ReactTestComponent);
 ```
 
+## Styled Components
+
+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
+class ReactWebComponent extends ReactHTMLElement {
+  connectedCallback() {
+    ReactDOM.render((
+      <StyleSheetManager target={this.mountPoint.parentNode}>
+        <App />
+      </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.
+
+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.
+
 # Contributing
 
 This package uses `semantic-release`. Changes will be compiled into a changelog and the package versioned, tagged and published automatically.