Another Sky - Web Development, Photography, Travel.

スタイルガイドジェネレータ「Hologram」のテンプレートを作ろうとHTML/CSSを書き始めたのですが、どうもスタイルガイドのテンプレートのCSSと、スタイルガイドでドキュメント化しようとしているCSSが干渉し合い、良い感じにならない気がします。スタイルガイドのテンプレートの命名規則を工夫することで干渉はかなり押さえられると考えられますが、例えばスタイルガイドのテンプレートのCSSでNormalize.cssを使った場合はどうでしょうか。

SC5 Style Guide Generatorを見つける

CSSの干渉について色々と思案している時、ふと「Shadow DOMでカプセル化できればいいのにな」と思い、おもむろに「styleguide shadowdom」でGoogle検索をしてみたところ、「SC5 Style Guide Generator」が見つかりました。デモを見たところ、確かにモジュールの表示サンプル部分が全てShadow DOMになっています。

gulp pluginとしても動作するようでこれはいいと思ったのですが、また一から覚え直すのはちょっと手間だなと感じました。

JavaScriptでカスタム要素の作成とShadow DOMの形成

他のツールが手間ならば、「Hologramを使いつつも、JavaScriptでShadow DOMによるカプセル化の恩恵を受けられるようにできないか」と考え、再び調べ始めました。確かCodeGridで連載があったなと思い、CodeGridを見返したりしました。

参考になったのは以下の記事です。

• Web Components最新事情 2014 - Custom Elementsを作る | CodeGrid
• Web Components最新事情 2014 - Shadow DOMを使う | CodeGrid
• Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks
• Shadow DOM 101 - HTML5 Rocks

Hologramのテンプレートは以下のようにしました。

<div class="codeExample">
  <div class="exampleOutput">
  </div>
  <div class="codeBlock">
    <div class="highlight">
      <pre><%= code_example %></pre>
    </div>
  </div>
  <template class="renderedExampleTmpl">
    <style>
      @import url(common/css/basic.css);
    </style>
    <%= rendered_example %>
  </template>
</div>

そして、次のようなJavaScriptを記述しました。

(function () {
    "use strict";
    var examples = document.querySelectorAll(".codeExample");

    Array.prototype.forEach.call(examples, function (example, index) {
        var appendTarget = example.querySelector(".exampleOutput");
        var OutputExample = Object.create(HTMLElement.prototype);
        var OutputExampleElem;
        var outputExampleElem = document.createElement("x-sg-output-example-" + index);

        OutputExample.createdCallback = function () {
            var shadowRoot = this.createShadowRoot();
            var template = example.querySelector(".renderedExampleTmpl");

            shadowRoot.innerHTML = template.innerHTML;
        };

        OutputExampleElem = document.registerElement("x-sg-output-example-" + index, {
            prototype: OutputExample
        });
        appendTarget.appendChild(outputExampleElem);
    });
}());

Google Chromeで見ると、下記のような表示結果になりました。インスペクタでh1にcolor: red;を設定しても、モジュールの表示サンプル部分には影響していません。Githubにサンプルをアップしています。

カスタム要素とShadow DOMを利用した場合の課題

課題としては、まず今日現在ではIEやFirefoxで閲覧できないことがまず挙げられます。以前セキュリティポリシー上IE6しか使用を認めない企業で作業をしたこともあり、Google Chromeが使用できないことも考えられるので、注意が必要でしょう。

また、以下の2点にも気付きました。

• スタイルガイドのテンプレートのCSSでbody要素に設定したスタイルはShadow DOMにも継承されること
• スタイルガイドでドキュメント化しようとしているCSSのbody要素に設定したスタイルは反映されないこと

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法を読むと、:hostセレクタを使用してカスタム要素にスタイルを設定することもできるようです。

最終的にスタイルガイドでShadow DOMを使うかどうかは分かりませんが、Web Componentsはまだ深く学ぶことができていないので、これをきっかけに研究してみようと考えました。

Hologramサンプルファイル

hideki-a/hologram-playgroundにアップしています。

• tools/hologramStuffにHologramのファイルが入っており、bundle installで必要なパッケージがインストールできます。
• tools/でgrunt styleguideを実行すると、docs/styleguideにスタイルガイドが出力されます。

さらなる改善

「続・スタイルガイドジェネレータ「Hologram」とShadow DOM」に執筆しました。