Question

我想定义一个可以包含多个元素的新元素<my-table> 列<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时（除非您在Chromium / Dartium中启用了显示shadowDOM的选项，或者您的浏览器不支持shadowDOM，那么您会看到polyfill如何尝试模仿shadowDOM）。

您可以将其与<video>等标记进行比较，只需添加此标记即可创建多个元素（如播放，停止，继续，快进按钮和<span>以及{{1用于在幕后添加的布局，它负责<div>标签的布局和行为，但在标记中不可见。

Answer 2

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

正如他所写，你可以使用以下内容获取内部HTML：

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

因为这只能找到带有id的节点，所以你也可以在Component的HTML中定义带有id的元素。

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

如何从外部聚合物元件进入内部聚合物元件

2 个答案: