この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Shadow DOM とは
Web Components を構成する要素の一つで DOM ツリーをカプセル化します。例えば意図せず ID や Class が重複してしまうなどの問題に対処します。表示を伴うコンポーネントライブラリの開発に良い効果が期待できそうです。
Shadow DOM について詳しくは HTML5 Rocks [Shadow DOM 201] などを参照してください。
動かしてみる
id='hostElement' に Shadow DOM をぶら下げて表示します。Shadow DOM 内部で定義された id='newText' へは外部から参照出来ない事を確認しています。
動くもの
コード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p id="hostElement"></p>
<script>
var shadow = document.querySelector('#hostElement').attachShadow({ mode: 'open' });
shadow.innerHTML = '<p id=\'newText\'>Shadow DOM として表示中の文字列です</p>';
if(!document.querySelector('#newText')){
shadow.innerHTML += '<p>外部から参照できませぬ</p>';
}
</script>
</body>
</html>まとめ
また一つ、 Safari が Chrome に追いついて来たようです。全般的に Chrome が対応した後に Safari と新機能のサポートがされているようですが、 現在 Safari を搭載しているのは Apple 製品なので、最新版のOS ≒ Safariの利用率が高く、意外と浸透するのは早そうですね。 ※ Apple は2012年に Windows 版の Safari の提供をやめたようでした。
2
