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

【问题标题】：How to access inner elements of an custom element defined through Polymer如何访问通过 Polymer 定义的自定义元素的内部元素
【发布时间】：2015-01-09 16:09:44
【问题描述】：

我正在使用 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");
     }
}

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

【问题讨论】：

标签： dart polymer

【解决方案1】：

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

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

【讨论】：

这解决了我的问题。令人惊讶的是，有必要使用“this.querySelector”。仅仅在“ready”方法中使用“querySelector”是不够的。
这可能是因为你导入了dart:html 没有as xxx 或show xxx。

【解决方案2】：

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

与

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

this.shadowRoot.querySelector("#myName") 将返回 DivElement

【讨论】：

$['myName'] 在这里可能更容易，以防它不是动态插入的。而且它可能不会起作用，因为它不在<template> 中。