Putting the same content in two html <slot> tags

Question

Is there a way (and if it is possible, what's the right way to do it) to put the same DOM element in two different locations in the document? It seems like it should be possible using <slot> tags.

My imagined use-case is to put two copies of the same fab in the document: one in the header and one floating in the bottom left, and conditionally hide one or the other depending on device width. So, if it's not possible, then is there some way to dynamically change which <slot> my DOM node is in? I'm using Polymer 2.0-preview by the way.

Answer 1

An element can be assigned to only one slot.

You may want to reconsider your premise. By far the simplest solution to your problem is to have the same element in your markup twice:

<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>

If, however, you really want to change what slot an element is assigned to, all you need to do is add the element to the children of the new slot's host, e.g.:

mySidebar.appendChild(myFab);