@amboss/design-system 1.0.9 → 1.0.10

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.0.10 (Tue Feb 15 2022)
+
+### Release Notes
+
+#### Add CacheProvider and createCache as exports ([#421](https://github.com/amboss-mededu/amboss-design-system/pull/421))
+
+Enable emotional DS components to work in the shadow-dom.
+https://github.com/emotion-js/emotion/issues/1366
+https://emotion.sh/docs/cache-provider
+https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
+https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
+
+---
+
+#### 🐛 Bug Fix
+
+- Add CacheProvider and createCache as exports [#421](https://github.com/amboss-mededu/amboss-design-system/pull/421) ([@AlexJeffcott](https://github.com/AlexJeffcott))
+
+#### Authors: 1
+
+- Alex ([@AlexJeffcott](https://github.com/AlexJeffcott))
+
+---
+
 # v1.0.9 (Fri Feb 11 2022)
 
 ### Release Notes

package/README.md

@@ -255,3 +255,33 @@ export const Box = styled.div<BoxProps>(
 );
 ```
 
+## Shadow-DOM
+In order to use emotion-enabled DS components in the shadow-dom, you need to take some steps to 'link' the styles in the light-dom (these are added by emotion using CSSStyleSheet.insertRule() which is why <style data-emotion> appears empty in the DOM).
+
+emotion-js/emotion#1366
+https://emotion.sh/docs/cache-provider
+https://stackblitz.com/edit/emotion-shadow-dom-example?file=ShadowDomContainer.js
+https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
+
+```js
+import { ThemeProvider, light, Card, H1, CacheProvider, createCache } from '@amboss/design-system';
+class SuchShadow extends HTMLElement {
+  connectedCallback() {
+    const root = document.createElement('div');
+    this.attachShadow({ mode: 'open' });
+    this.emotionCache = createCache({ container: this.shadowRoot });
+    render(
+      <ThemeProvider theme={light}>
+        <CacheProvider value={this.emotionCache}>
+          <Card>
+            <H1>I love you shadow unicorn!!!</H1>
+          </Card>
+        </CacheProvider>
+      </ThemeProvider>,
+      root
+    );
+  }
+}
+
+customElements.define('shadow-element', SuchShadow);
+```