あいさつ

こんにちは。Product Team の冨田、阿波連、渡邉、鈴木、長田です。*1
本記事では、EmotionでスタイリングしたReactコンポーネントをWeb Componentとして出力しようとした時に、困ったことがあったので、解決方法をお教えします。

私たちの困りごと

私たちは、ReactコンポーネントをEmotionでスタイリングして、それをWeb Componentsとして出力することにしました。
以下のような感じです。

import { createRoot } from "react-dom/client";
import { css } from "@emotion/react";

const App = () => {
  return (
    <div css={css`
      font-size: 32px;
    `}>
      hello world
    </div>
  );
}

class EmotionEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const root = createRoot(this.shadowRoot!);
    root.render(<App/>);
  }
}

customElements.define("emotion-el", EmotionEl);

Emotionを使ってスタイリングをして、カスタムエレメントとして利用可能にしています。
この <emotion-el> をカスタムエレメントとして利用するとどうなるかというと、スタイルが当たらず、ただただ hello world が表示されるだけでした。

原因はなんだろう？

ReactコンポーネントにEmotionで通常通りCSSを書くと、 <style> が <head> に入ってしまいます。
そのため、Shadow Rootの中にある要素 <emotion-el> へスタイリングが適用されなかったのです。

解決策

Shadow Rootの中に <style> が配置されればスタイリングが適用されますので、Emotionの機能で指定したところに <style> を配置するように指定できればよさそうです。

それには、Emotionのcache機能を使用するのが良さそうです。createCacheを使うことで、スタイルがどのように挿入されるかを指定できます。

この機能は次のようにして利用できます。CacheProviderと組み合わせることで、デフォルトのキャッシュをオーバーライドしてShadow Rootの中にある要素内に <style> を配置します。

import { createRoot } from "react-dom/client";
import { css, CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

const App = () => {
  return (
    <div css={css`
      font-size: 32px;
    `}>
      hello world
    </div>
  );
}

class EmotionEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    // container にShadow Domを指定することで、Shadow Domに <style> を配置してもらえるように指示する
    const cache = createCache({ key: "hoge", container: this.shadowRoot! });
    const root = createRoot(this.shadowRoot!);
    root.render(
      // CacheProviderでReactコンポーネントを囲む
      <CacheProvider value={cache}>
        <App/>
      </CacheProvider>
    );
  }
}

customElements.define("emotion-el", EmotionEl);