在 Polymer 中访问内容标签内的 html

Question

我正在尝试访问我在自己的聚合物元素中编写的 html，但它不起作用。我怎样才能做到这一点？

index.html

<my-element> content I am trying to access </my-element>

我的-element.html

<polymer-element name='my-element'>
    <template>
        <content id='content'></content>
    </template>
    <script>
        Polymer({
            ready: function(){
                console.log('html: '+this.$.content.innerHTML);
            }
        });
    </script>
</polymer-element>

控制台

html:

Answer 1

不幸的是，该实现将内容节点作为 content 的兄弟，而不是嵌套节点。也就是说，一切准备就绪后，文档的结构将如下所示：

<content id='content'></content>
content I am trying to access

与您预期的不同：

<!-- THAT IS NOT HOW IT’S COMPOSED -->
<content id='content'>content I am trying to access</content>

幸运的是，您仍然可以在模板上下文中访问 childNodes：

  Polymer({
      domReady: function() {
        var content = '';
        this.childNodes.array().forEach( function(el) {
          content += el.textContent; // do whatever you want here
        });
        console.log(content);
      }
  });

  //⇒ content I am trying to access

希望对您有所帮助。

在 Polymer 中访问内容标签内的 html

Access html inside content tag in Polymer

web-component

polymer