Question

我有一个聚合物自定义元素，如下面

<custom-element>
  <img src="path1">
  <img src="path2">
  <img src="path3">
  <img src="path4">
</custom-element>

现在我想在单独的div

中显示每个图像

我在custom-element模板

中尝试过这样的操作

<div class="image-wrapper">
   <content select="img"></content>
</div>

上面的代码将所有图片都放在image-wrapper的单个div中，如下所示

<div class="image-wrapper">
  <img src="path1">
  <img src="path2">
  <img src="path3">
  <img src="path4">
</div>

但我希望每个图片都在image-wrapper个人身上，如下所示

<div class="image-wrapper">
  <img src="path1">
</div>
<div class="image-wrapper">
  <img src="path2">
</div>
<div class="image-wrapper">
  <img src="path3">
</div>
<div class="image-wrapper">
  <img src="path4">
</div>

我怎样才能做到这一点？

Answer 1

快速回答，

<custom-element>
  <img src="path1">
</custom-element>
<custom-element>
  <img src="path2">
</custom-element>
<custom-element>
  <img src="path3">
</custom-element>
<custom-element>
  <img src="path4">
</custom-element>

你可能会像这样包装它，

<template is="dom-repeat" items="[[paths]]" as="path">
    <custom-element>
      <img src="[[path]]">
    </custom-element>
</template>

假设路径是一个数组。

paths = [
    "path1",
    "path2",
    "path3",
    "path4",
];

如何获得聚合物定制元素的innerDOM？

1 个答案: