Reactのスタイル問題にShadow DOMを使うという選択肢

といっても今のところChromeアドオンやElectronくらいでしか使えませんが。

BEMとかCSS ModulesとかCSS in JSとかで非常に心が疲れたので、
Shadow DOMに安寧の地を求めることにしました。

ReactでShadow DOMを使う

別に難しいことするわけではなく、ReactShadowを使うだけです。

• Wildhoney/ReactShadow: Utilise Shadow DOM in React with all the benefits of style encapsulation.

hello.jsx

import React from 'react';
import ShadowDOM from 'react-shadow';

export default class Hello extends React.Component {
  render() {
    return (
      <ShadowDOM>
        <h1>Hello, World!</h1>
      </ShadowDOM>
    );
  }
}

タグで囲むだけでそれ以下の要素がShadow DOMになってCSS空間が分割されます。

スタイルの適用

スタイルはSassで書きたい勢なので、
webpackのraw-loaderとsass-loaderでSassをCSS文字列として読み込ませて、

webpack.config.js

    loaders: [
      {
        test: /\.scss$/,
        loaders: ['raw-loader', 'sass-loader']
      }
      ...
    ]

styleタグに放り込んで終わり。

hello.jsx

import React from 'react';
import ShadowDOM from 'react-shadow';
import css from './style.scss';

export default class Hello extends React.Component {
  render() {
    return (
      <ShadowDOM>
        <div>
          <style>{css}</style>
          <h1>Hello, World!</h1>
        </div>
      </ShadowDOM>
    );
  }
}

...Polymerかな？

感想

大して使ってないですが、今のとこはいい感じ。

Shadow DOMによって新たなCSSの適用単位が生まれるので、
ReactコンポーネントとCSSコンポーネントは1対1なのか問題をある程度解決できるかもね。

追記

iframeを使えば同じことできるので、Shadow DOM非対応のブラウザでも使えます。

• ryanseddon/react-frame-component: Render your React app to an iFrame

iframeではContent Security Policyのchild-src 'none'に引っかかるかと思ってたけど、
src属性使わず外からいじる分にはセーフっぽい。