// Shadow DOMを使って、見た目の情報を隠す var test1 = document.querySelector('#test1'); var shadow = test1.createShadowRoot(); // いちいちcreateElementなんてやってらんないよ!ってことで、HTML Templatesを使うる var template = document.querySelector('#t-test'); var templateClone = document.importNode(template.content, true) shadow.appendChild(templateClone);
<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 id="test2">test2</div> <template id="t-test"> <style> :host { width: 300px; height: 100px; line-height: 100px; text-align: center; border: 5px dashed #f0f; margin: 5px; } </style> <content select="[hoge1]"></content> <content select="[hoge2]"></content> <content select=".hoge3"></content> <content select="#hoge4"></content> <content></content> </template>