如何访问通过 Polymer 定义的自定义元素的内部元素

Question

我正在使用 Dart 在 Polymer 中创建自定义元素。我想从标签内部提取一些内容，像这样：

<my-element>
  <name>doof</name>
</my-element>

在用于处理 my-element 元素的 dart 代码中，我发现很难提取 "name" 元素的内容。下面的代码说明了我所做的一些尝试：

@CustomTag('my-element')
    class MyElement extends PolymerElement {

     MyElement.created() : super.created() {

           // Will always find the first element in the document. That quickly
           // gets confusing when I have multiple instances of  <my-element> in the
           // document.
           final Element nameElement = querySelector("name");

           // Returns null
           final Element nameElement = shadowRoot.querySelector("name");
     }
}

...所以我很困惑:-)有人有什么想法吗？

Answer 1

首先，除了一些局部变量初始化之外，不要理会 created 构造函数。
改写 attached 或 ready 等生命周期回调。 querySelector("name"); 应该可以。如果您获得文档中的第一个元素，那么您应该使用 this.querySelector("name");（取决于您的导入）shadowRoot.querySelector("name"); 用于 <my-element> 的 <template> 标签内的元素，而不是用于其children（就像你的问题）。

@CustomTag('my-element')
    class MyElement extends PolymerElement {

     MyElement.created() : super.created();

     @override
     void ready() {

           // Will always find the first element in the document. That quickly
           // gets confusing when I have multiple instances of  <my-element> in the
           // document.
           final Element nameElement = this.querySelector("name");
     }
}

Answer 2

this.shadowRoot.querySelector() 将扫描当前 'my-element' 标签内的 dom。

和

<my-element>
  <div id="myName">doof</div>
<my-element>

this.shadowRoot.querySelector("#myName") 将 return DivElement

如何访问通过 Polymer 定义的自定义元素的内部元素

How to access inner elements of an custom element defined through Polymer

dart

polymer