我正在关注影子 DOM 上的本教程:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
由于某种原因,当我在元素上调用 createShadowRoot 函数时,该元素变得不可见。
这是我的代码:
<div id="nameTag">Bob</div>
<template id="nameTagTemplate">
<style>
.outer {
border: 2px solid brown;
}
</style>
<div class="outer">
<div class="boilerplate">
Hi! My name is
</div>
<div class="name">
Bob
</div>
</div>
</template>
<script>
var shadow = document.querySelector('#nameTag').createShadowRoot();
// var template = document.querySelector('#nameTagTemplate');
// shadow.appendChild(template.content.cloneNode());
</script>
当我不调用此方法时,代码可以正常工作。
有什么想法让它变得不可见吗?
谢谢:)
最佳答案
影子 DOM 的主要目标是将内容与表示分离。阅读:The content is in the document; the presentation is in the Shadow DOM
在 Shadow DOM 中 <content>
充当内容的插入点(在本例中,
元素中的文本“Bob”)我们要显示。如果没有这个,内容虽然已经在文档中可用,但无法呈现。
所以,您需要将代码修改为这样 -
<template id="nameTagTemplate">
<style></style>
<div class="outer">
<div class="boilerplate">
Hi! My name is
</div>
<div class="name">
<content></content>
</div>
</div>
</template>
并且,尝试使用
var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
//shadow.appendChild( template.content.cloneNode() ); // does not work
shadow.appendChild( template.content.cloneNode(true) );
// or
shadow.appendChild( template.content );
关于javascript - createShadowRoot 使元素不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25475533/