読者です 読者をやめる 読者になる 読者になる

アラタナエンジニアブログ

aratana Engineer's Blog

もうバッティングなんか怖くない! 全てを影へ隠す【Shadow DOM】

CSS HTML フロントエンド

初めまして。
食べることより寝ることを優先していたら、体脂肪率が3%まで落ちてしまうという自分でもびっくりな
運動できないアスリートこと、フロントエンドエンジニアの小西です。


今回は、CSSを使ってサイトを構築する際にとても便利な機能である【Shadow DOM】についてお話したいと思います。

Shadow DOMとは?

WHATWG において仕様が定められている Web Components と呼ばれる、 Document Object Model (DOM) を部品化する仕組みを構成する要素の一つである。 DOM ツリーと Shadow サブツリーの間に、通常の DOM 操作ではアクセスできない境界をもうけることにより、 DOM ツリーの機能の抽象化をもたらすことが主な目的のひとつである。(Wikiより)

他のプログラム言語でいうところの【スコープ】みたいなものです。
デザイナーやマークアップエンジニアにとっては何のこっちゃ?という話ですが
簡単に言うと、【iframe】みたいなものです。

外側のスタイルはiframe内には適用されず、逆にiframe内から外側にはスタイル適用できない

この機能を実現できるのが【Shadow DOM】です。


言葉だけでは理解が難しいので実際に見てみましょう。

<button>Hello, World</button>

この記述であれば



上のようなボタンが表示されると思います。


そこに

<script>
var host = document.querySelector('#button1');
var root = host.createShadowRoot();
var button = document.createElement('button');
button.id="button_shadow";
button.textContent = 'こんにちは、影の世界!';
</script>

このような記述をすると…

このように、【#button1】の中身が影世界のものと書きかわります。
もちろん影世界でstyleを調整してあげれば見た目も変えれます。

今回は紹介していませんが、HTML5の要素である【template】タグを使えば
ボタンをパーツ化して複製したりもできます。












ふーん…って感じですね。

ちょっと待ってください。
記事のタイトルに何て書いてましたっけ?
そう【もうバッティングなんか怖くない!】です。


試してみましょう


影世界のJSで生成したボタンには【#button_shadow】というIDが付与されています。
その【#button_shadow】に対して

#button_shadow {
  background: #000;
  color: #FFF;
}

と定義すると、通常では

となるはずですが、実際は…





ご覧の通りなにも変わらず影世界で生まれたままの姿です。

影の世界で生成されたものは、外側からは一切の影響を受けません。



ということは…
ページ全体ではグローバルなCSSを使用し
ボタンなどのパーツ等をテンプレート化しておき、影世界を作りだしてすり替えるという方法がとれますね!


さらにいうと…
表世界には必要最低限の記述しかしないので
表でセマンティックなマークアップを施し、影世界でゴテゴテに装飾したパーツを作りすり替える方法も取れます。



どうですか?
デザイナーやマークアップエンジニアにはちょっと難しいかもしれませんが
JSを触っている自分からするととても便利な機能です。

他にも【Shadow DOM】に関係する機能で【Imports】や【Custom Elements】など
【Web Components】というくくりで、様々な機能があります。

今回は【Shadow DOM】しか紹介しませんでしたが、他の機能もとても便利なので
ぜひ調べて使ってみてください!













最後に一つ…
【Shadow DOM】がとても便利なので紹介しましたが…



chromeの35以上とごく一部のブラウザしか使えません、ゴメンナサイ!