Dart Web UI：如何获取对 Web 组件中项目的引用？答案

【问题标题】：Dart Web UI: How do I get a reference to an item within in a web component?Dart Web UI：如何获取对 Web 组件中项目的引用？
【发布时间】：2013-04-27 01:11:41
【问题描述】：

如果我在我的应用程序中添加一些 Web 组件，如下面的 myapp.html 所示：

<head>
  <link rel="components" href="package:xclickcounter/xclickcounter.html">
</head>
<body>
   <div id="container1"><x-click-counter></x-click-counter></div>
   <div id="container2"><x-click-counter></x-click-counter></div>
   <div id="container3"><x-click-counter></x-click-counter></div>
   <div id="container4"><x-click-counter></x-click-counter></div>
   ...
</body>

我的 Web 组件中有许多元素，如下面的 xclick-counter.html 所示：

<html><body>
  <element name="x-click-counter" constructor="CounterComponent" extends="div">
    <template>
      <button id="button1" on-click="increment()">\\\Increment me</button>
      <button id="button2" on-click="decrement()">Decrement me</button>
      <span>(click count: {{count}})</span>
    </template>
  </element> 
<!-- more below... -->
</body></html>

如何从 myApp.dart 中的 #container3 中的 Web 组件中获取对 #button2 的引用？

我希望我可以得到如下引用，但我的引用结果为空：

var reference=document.query('#container1').query('#button2');

【问题讨论】：

标签： dart dart-webui web-component

【解决方案1】：

一般来说，您不应该尝试这样做。 :) Shadow DOM 是一个封装边界，自定义元素的模板内容应作为实现细节隐藏。将自定义元素想象成一个类。您不想进入一个类并看到私有字段，就像您不想进入一个自定义元素并看到 Shadow DOM 中的节点一样。

说了这么多，我想提个建议：

Web UI 目前不会在页面上保持 ID（来自自定义元素内部）的唯一性。对于 x-click-counter 的每个实例，页面都会有一个重复的 button1 和 button2 元素。

我打开https://github.com/dart-lang/web-ui/issues/492 来跟踪问题。

解决方法是使用类而不是 ID。然后，您可以为宿主元素指定一个 ID，就像您在代码中所做的那样。试试改成这样：

  <element name="x-click-counter" constructor="CounterComponent" extends="div">
    <template>
      <button class="button1" on-click="increment()">\\\Increment me</button>
      <button class="button2" on-click="decrement()">Decrement me</button>
      <span>(click count: {{count}})</span>
    </template>
  </element>

【讨论】：

感谢您的好评。我建议的类解决方法似乎不适用于我的代码“reference=document.query('#container1').query('.button2');'仍然显示为 null。我想底线是我不是在寻找要完全封装的 Web 组件，我需要等效于公共字段和私有字段。
您可能会阅读更多关于 Shadow DOM 的信息：html5rocks.com/en/tutorials/webcomponents/shadowdom 它可能会提供更多上下文。
感谢教程链接。这解释了很多，我更新了我的代码以消除访问封装元素的需要。
@KenM 很高兴为您提供帮助。如果我的回答对您有帮助，您能采纳吗？ :)