// test2に対しても実行したいので、関数化 var shadowDomTest = function (selector) { // Shadow DOMを使って、見た目の情報を隠す var element = document.querySelector(selector); var shadow = element.createShadowRoot(); // いちいちcreateElementなんてやってらんないよ!ってことで、HTML Templatesを使うる var template = document.querySelector('#t-test'); var templateClone = document.importNode(template.content, true); shadow.appendChild(templateClone); }; shadowDomTest('#test1'); shadowDomTest('#test2');
<div id="test1"> <span hoge1>test1</span> <span hoge2>test1_2</span> <span class="hoge3">test1_3</span> <span id="hoge4">test1_4</span> <span>test1_5</span> </div> <div class="hogehoge"> <div id="test2">test2</div> </div> <template id="t-test"> <style> :host-context(.hogehoge) { width: 300px; height: 100px; line-height: 100px; text-align: center; border: 5px dashed #f0f; margin: 5px; } ::content [hoge2] { background-color: #00f; } </style> <span>test0</span> <content select="[hoge1]"></content> <content select="[hoge2]"></content> <content select=".hoge3"></content> <content select="#hoge4"></content> <content></content> </template>
#test2::shadow span { background-color: #0ff; }