createShadowRoot 使元素不可见答案

【问题标题】：createShadowRoot makes element not visiblecreateShadowRoot 使元素不可见
【发布时间】：2014-08-24 19:33:00
【问题描述】：

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

当我不调用此方法时，代码可以正常工作。
任何想法为什么它使它不可见？

谢谢:)

【问题讨论】：

有人吗？ :( 真的坚持这一点。谢谢
尝试使用template.content.cloneNode(true)（深度克隆）。

标签： javascript html shadow-dom

【解决方案1】：

shadow 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 );

【讨论】：

【解决方案2】：

使用纯javascript：

// shadow DOM example with <template> and template string
//
var nameTag = function(selector, newName)
{
     var name = newName || document.querySelector(selector).innerHTML;
     var shadow = document.querySelector(selector).createShadowRoot();
     var templateNode = createNameTagTemplate(name);
     var clone = document.importNode(templateNode, true);
     shadow.appendChild(clone.content);
};

function createNameTagTemplate(name)
{
     var templateNode = document.createElement("template");
     templateNode.innerHTML = `
        <style>
        .outer {
          border: 2px solid brown;
          border-radius: 1em;
          background: red;
          font-size: 20pt;
          width: 12em;
          height: 7em;
          text-align: center;
        }
        .boilerplate {
          color: white;
          font-family: sans-serif;
          padding: 0.5em;
        }
        .name {
          color: black;
          background: white;
          font-family: "Marker Felt", cursive;
          font-size: 45pt;
          padding-top: 0.2em;
        }
        </style>
        <div class="outer">
          <div class="boilerplate">
           Hi! My name is
          </div>
          <div class="name">
           ${name}
          </div>
        </div>`;
   return templateNode;
}

如果你有这个：

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

nameTag("#foo") 将使用当前名称使 div 成为名称标签，或者 nameTag("#foo", "Joe") 将改为名称“Joe”。注意：在 dom.webcomponents.enabled 标志 (about:config) 后面的 Firefox 中支持。

【讨论】：