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

Question

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

我想象的use-case是在文档中放两份同一个fab：一份在header，一份在左下方，根据情况有条件地隐藏一个或另一个设备宽度。所以，如果不可能，那么有什么方法可以动态更改 <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);

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

Putting the same content in two html <slot> tags

html

web-component

shadow-dom

polymer

polymer-2.x