将 HTML 追加到聚合物模板根目录

Question

我无法将动态HTML直接添加到聚合物元素中，而是被迫将其添加到现有的子元素中。 这是聚合物的局限性，还是我缺乏理解？

虽然拥有另一个div肯定很受欢迎，但我真的希望聚合物能帮助我把它放在我的评论镜子里。

例

对于以下元素：

<polymer-element name="my-el1">
    <template>
      <div id='myid'></div>
    </template>
</polymer-element>

此脚本仅在添加到div （#myid） 时显示，而不是直接添加到模板

：

<script>
var el = document.createElement('div');
el.innerHTML  = 'text';
this.appendChild(el);        //shows in DOM, not in browser
this.$.myid.appendChild(el); //works
</script>

捷轩

jsbin 的完整示例

Answer 1

this引用 Polymer 对象，而不是实际的 DOM。为了将一些东西直接添加到shadowDOM中，你需要使用以下内容：

this.shadowRoot.appendChild(el);

这是你的JSBin：http://jsbin.com/lakijafexe/1/edit

请记住，shadowRoot 不是一个"标签"，因此您将看到示例的 tagName 未定义。