以编程方式访问 Polymer 内部元素答案

【问题标题】：Access Polymer inner element programmatically以编程方式访问 Polymer 内部元素
【发布时间】：2014-02-17 21:31:17
【问题描述】：

我将我的应用程序封装在一个 Polymer 元素中，并且我想在其中使用另一个聚合物元素。要调用内部元素的所有方法，我正在尝试使用 $[]。内部的外部聚合物元素我有这个：

ImageEditor ime;
DivElement div2;
ImageTool.created(): super.created(){
  div2 = $["secondDiv"];
  ime = $["imageEditor1"]
}

在 Html 中我只有：

<polymer-element name="da-imagetool">
<template>
<div class="images" id="mainDiv">
  <da-imageeditor id="imageEditor1" name="ied"></da-imageeditor>

最后是脚本 src。出于某种原因，当我将 imageEditor1 分配给 ime 时出现异常。

例外：类型“HtmlElement”不是“值”类型“ImageEditor”的子类型。

【问题讨论】：

【解决方案1】：

浏览器似乎没有升级<da-imageeditor> 元素。

确保<import> 是<da-imageeditor> 元素，并在ImageEditor 类声明上具有正确的@CustomTag 注释。

【讨论】：

【解决方案2】：

这很可能是导入路径的问题。如果您不使用正确的路径，则无法识别类型（规范化问题）

这个错误应该会解决一段时间 https://code.google.com/p/dart/issues/detail?id=15953 但从那以后我就没有和 Polymer 合作过。

显示你的导入路径（HTML 和 Dart）和你的应用程序的目录结构（你的入口页面和你的 Polymer 元素在哪里）然后我会看看。

【讨论】：

【解决方案3】：

您使用的是哪个版本的 dart-polymer？对于 0.9.5，以下几行：

XElement.created(): super.created() { print($['el-id']); }

void enteredView() { print($['el-id']); }

在 created() 中，引用的元素没有给出任何内容，而在 enterView() 中，它确实引用了影子根的特定元素。

如果使用shadowRoot.querySelector('#el-id') 代替速记映射$['el-id']，则该行为消失。

【讨论】：

这并不奇怪。该元素必须被初始化和“升级”。有一些生命周期回调，例如 ready 和 enteredView，这已经完成了。 $['el-id'] 在构造函数中不起作用，因为集合尚未填充对其子项的引用，但在 enteredView 中，这已经完成。 shadowRoot.querySelector 孩子们自己查找，所以它不依赖于这个来完成。
@GünterZöchbauer 让我们确定这个“奇怪”的定性。毕竟，这种行为是完全可以想象的。
文档可能会更好，但当事情不断发展和快速变化时能够维护它。