同じ内容を2つのhtmlに埋め込む<slot>タグ

Question

ドキュメント内の2つの異なる場所に同じDOM要素を配置する方法があります（可能な場合は、それは正しい方法です）。 <slot>タグを使用することが可能なようです。

私が想像するのは、同じファブの2つのコピーをドキュメントに挿入することです.1つはヘッダーに、もう1つは左下にフローティングし、デバイスの幅に応じて条件付きで非表示にします。したがって、それが不可能な場合は、DOMノードが入っている<slot>を動的に変更する方法がありますか？私はPolymer 2.0プレビューを使っています。

Answer 1

要素は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);