// 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">test1</div> <div id="test2">test2</div> <template id="t-test"> <content></content> </template>
div { width: 300px; height: 100px; line-height: 100px; text-align: center; border: 5px dashed #f0f; margin: 5px; }