1

如果我在我的应用程序中添加一些 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');
4

1 回答 1

2

通常，您不应尝试这样做。:) 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>
于 2013-05-03T04:38:22.313 回答