html - 将相同的内容放在两个html中标签

Question

有没有办法（如果可能，正确的方法是什么）将相同的 DOM 元素放在文档中的两个不同位置？似乎应该可以使用<slot>标签。

我想象的用例是将同一个工厂的两个副本放在文档中：一个在页眉中，一个在左下角浮动，并根据设备宽度有条件地隐藏一个或另一个。那么，如果不可能，那么有什么方法可以动态更改<slot>我的 DOM 节点所在的位置吗？顺便说一句，我正在使用 Polymer 2.0-preview。

Answer 1

一个元素只能分配给一个插槽。

您可能需要重新考虑您的前提。到目前为止，解决问题的最简单方法是在标记中使用相同的元素两次：

<template is="dom-if" if="[[!mobileDevice]]">
  <my-header>
    <my-fab></my-fab>
  </my-header>
</template>

<!-- ... -->

<my-sidebar>
  <template is="dom-if" if="[[mobileDevice]]">
    <my-fab></my-fab>
  </template>
</my-sidebar>

然而，如果你真的想改变一个元素被分配到哪个槽，你需要做的就是将元素添加到新槽宿主的子元素中，例如：

mySidebar.appendChild(myFab);