Question

我一直在研究一个组件来简化一系列其他组件。我想要这样做的原因几乎是创建一个实现的位置，因为代码是相同的，我们不必担心维护17个html文件，只需1个。

我试图找到一种方法以编程方式将1个Web组件移动到另一个组件中。某种A.appendHtml(B);，但我不能100％确定它是否适用于WebComponents。

我的目标是在渲染到页面之前将mine-b的模板内容移动到ele-a中。基本上展开mine-b包装并将其注入到它想去的地方

<template>
  <ele-a></ele-a>
  <div>
    <mine-b></mine-b>
  </div>
</template>

<ele-a></ele-a>仅接受2种代码类型：sub-a和sub-b。 sub-b可以接受form代码。

<ele-a>
  <sub-a></sub-a>
  <sub-b>
    <form></form>
  </sub-b>
</ele-b>

所以我想我自己创建一个允许我简化所有属性设置的组件

<mine-a>
  <ele-a>
    <content></content>
  </ele-a>
</mine-a>

<mine-b>
  <sub-a></sub-a>
  <sub-b>
    <content></content>
  </sub-b>
</mine-b>

这将允许我做类似的事情：

<mine-a>
  <mine-b>
    <form></form>
  </mine-b>
</mine-a>

我一直有的问题是，因为ele-a只接受sub-a和sub-b所以我不能把它定义为ele-a的孩子。原因是ele-a中的select属性会阻止我冲掉我的b。所以我试着让它成为兄弟姐妹：

<mine-a>
  <ele-a></ele-a>
  <mine-b></mine-b>
</mine>

所以这就是我现在所处的位置。在扩展PolymerElement的mine-a的dart中。有没有办法将mine-b模板的标记内容移到ele-a？ IE：sub-a和sub-b？

我正在考虑做类似的事情：

<mine-a>
  <ele-a id="targetEle"></ele-a>
  <div id="sourceEle" hidden>
    <content select="mine-b"></content>
  </div>
</mine-a>

class MyElementA extends PolymerElement {
  DivElement get _source => $['sourceEle'];
  ElementA get _target => $['targetEle'];
  MyElementA.created() :  super.created(){
    _target.appendHtml(_source.children());
  }
}

或者只是将1个WebComponent移动到另一个中？我一直遇到一些问题。

在查看PolymerLife Cycle时，我想我可以在dom初始化之前通过created函数执行此操作。

以编程方式移动PolymerElement组件

0 个答案: