Question

我正在编写一个应该像这样使用的Polymer元素：

<x-elem>Some text</x-elem>

该元素将转换文本内容。但是当我尝试在attached回调中访问它时，它是空的：

attached: function() {
    var text = this.root.textContent;
    console.log(text); // Outputs ''
}

坦率地说，所有子节点的数量都是0：

attached: function() {
    console.log(this.root.childNodes.length); // Outputs 0
}

根据these docs，我认为至少我尝试获取子节点是正确的，但显然我在这里做错了。也许我需要在我的模板中添加一些东西（现在它很简单<template></template>，但目前还不清楚是什么。

Answer 1

this.root提供对元素的本地DOM （即<dom-module>模板中本地声明的DOM）的访问权限，但您正在尝试{{3} （即传入的DOM）。请使用Polymer.dom(this).textContent：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    attached: function() {
      console.log('textContent:', Polymer.dom(this).textContent);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo>hello world</x-foo>

  <dom-module id="x-foo">
    <template>
    </template>
  </dom-module>
</body>

如何访问Polymer中的根元素文本？

1 个答案: