如何引用WebComponent实例？

Question

我想将对标记中创建的WebComponent实例的引用传递给WebComponent dart类。例如：

HTML：

<element name="x-container>
  <template iterate="x in xs">
    <x-content-elem>
      <x-item item="{{x}}" top-container="{{lexical-scoped-ref-to-container}}">
    </x-content-elem>
</template>
...

我正在寻找一种方法来获取对x-item.top-container属性的x-container的引用。主要的是x-item可能以某种复杂的方式嵌套，因此进行动态查找可能很困难或者不够强大。

Answer 1

您可以使用DOM查找父元素。这样的事情应该有效。

从x-item内部：

Container container = this.parent.xtag;

自定义元素的作用类似于页面上的节点。 elem.xtag getter返回支持页面上节点的Dart对象。

如果中间还有其他元素，您仍然可以使用CSS查询来查找您要查找的元素。