Question

我正在考虑一些代码，这些代码将包装Web组件的每个子代。类似的东西：

<dom-module id=test">
  <template>
    <template is="dom-repeat" items="{{contents.children}}">
      <div>
        {{item}}
      </div>
    </template>
  </template>
</dom-module>

所以会发生什么事情，如果我做了类似的事情：

<test>
  <span>foo</span>
  <span>bar</span>
</test>

它会被踢掉：

<test>
  <div><span>foo</span></div>
  <div><span>bar</span></div>
</test>

我正在寻找可以做到这一点的方法，但由于contents.children不属于不动产，因此我在尝试正确创建dom-repeat时遇到问题。

编辑我正在查看内容代码允许的属性， select 加上所有全局变量。

所以从理论上讲，我可以分配一个ID然后让它的孩子呢？

<content id="myContent"></content>

然后在飞镖中说：

ContentElement get _content => $['myContent'];
@property HtmlElement children = [];

a.created(): super.created(){
  set("children", _content.children);
}

然后相应地标记模板？

<template is="dom-repeat" items="{{children}}">
  ...
</template>

Answer 1

看起来您想要包装某些元素并为它们添加一些新功能。

最简单（也是最常见的聚合物）方法是引入另一个自定义元素，它（仅）负责包装。

您的test元素（顺便提一下，名称不正确 - 名称必须包含短划线）将如下所示：

<dom-module id=test-element">
  <template>
    <content></content>
  </template>
</dom-module>

（我按照惯例修改了命名。从test重命名为test-element。）

新创建的包装元素（名为wrapper-element）应如下所示：

<dom-module id=wrapper-element">
  <template>
    <div><content></content></div>
  </template>
</dom-module>

所有东西放在一起，用法就是这样：

<test-element>
  <wrapper-element><span>foo</span></wrapper-element>
  <wrapper-element><span>bar</span></wrapper-element>
</test-element>

有了这个，你就得到了一个干净的解决方案，你甚至不需要任何JS代码来包装逻辑。

我可以根据<contents>的子元素数使用Template DOM转发器吗？

1 个答案: