如何从外部聚合物元件访问内部聚合物元件

Question

我想定义一个新元素 <my-table> with可以包含若干 列 <mytable-col> 用法应该是这样的:

<my-table id="mt1">
 <mytable-col id="c1" title ="name" type="string"width="150"></mytable-col>
 <mytable-col id="c2" title ="age" type="number" width="60"></mytable-col>
</my-table>

是否有可能用另一个（必需的）新的"内部"定义一个元素 元素？如何从外部的dart代码访问 内部元素实例。

如果两者的模板 <my-table> 和 <mytable-col> 包含标记，其中 是内部的标记 <mytable-col> 插入？

Answer 1

你写标记的方式 <mytable-col> 元素是 <my-table> 它们被添加到 <content> 你的内部节点 <my-table> 元素。

您可以从您的代码中访问这些子元素。 <mytable-col> 像

var listContent = ($['content'] as ContentElement).getDistributedNodes();

我不确定你说的是什么意思

是否有可能用另一个（必需的）新的"内部"元素定义一个元素？

您可以在您的 enteredView() 方法（后 super.enteredView(); 验证正确的子节点在 <content> 节点，如果没有则抛出异常。

内部插入的标记在哪里？

标记被插入到它的元素中 shadowDOM.
标记会更改元素的外观，但通常不可见,
例如，当你打开 view source 从您的浏览器（除非您启用显示选项 shadowDOM 在Chromium/Dartium或您的浏览器不支持 shadowDOM 然后你看到polyfills如何试图模仿 shadowDOM).

您可以将其与以下标签进行比较 <video> 只要添加这个标签就会创建许多元素（如播放、停止、继续、快进按钮和 <span>s和 <div>s表示在幕后添加的布局，这些布局负责 <video> 标记，但在标记中不可见。

Answer 2

在@Günterzöchbauer的帮助下，我找到了解决方案:

正如他所写的，你可以用:

var listContent = ($['content'] as ContentElement).getDistributedNodes();

因为这只找到具有id的节点，所以您也必须在组件HTML中定义具有id的元素。

<content id = content><span>inner HTML</span></content>