Question

我正在关注shadow 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 );

Answer 2

使用纯javascript：

 <div id="foo">Bob</div>

然后如果你有这个：

{{1}}

nameTag（＆＃34;＃foo＆＃34;）会使用当前名称将div变为名称标签，或者 nameTag（＆＃34;＃foo＆＃34;，＆＃34; Joe＆＃34;）将用于名称＆＃34; Joe＆＃34;代替。注意：在Firefox中支持dom.webcomponents.enabled标志（about：config）。

createShadowRoot使元素不可见

2 个答案: