dart - 如何访问通过 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");适用于 <template> 内的元素您的标签<my-element>不适合它的 child (就像你的问题一样)。

@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");
     }
}