Question

如果我在我的应用中添加了许多网络组件，如下面的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>

我的网络组件中有许多元素，如下面的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');

Answer 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>

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

1 个答案: