将相同的内容放在两个 html <slot> 标签中答案

【问题标题】：Putting the same content in two html <slot> tags将相同的内容放在两个 html <slot> 标签中
【发布时间】：2017-10-13 10:48:06
【问题描述】：

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

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

【问题讨论】：

一般来说，slot 只引用从“light”dom 到 shadow dom 的节点。每个元素只能在一个插槽中。如果你希望它在你的 shadow dom 中“加倍”，你必须克隆 slot 节点。

标签： html polymer web-component shadow-dom polymer-2.x

【解决方案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);

【讨论】：