javascript - createShadowRoot 使元素不可见

Question

我正在关注影子 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>

当我不调用此方法时，代码可以正常工作。
有什么想法让它变得不可见吗？

谢谢:)

Answer 1

影子 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 );