ポリマー2：どのようにスロットを持つ要素を拡張し、そのスロットに子テンプレートをスタンプするか？

Question

テンプレートにスロットがある要素を拡張し、そのスロットに子要素のdomをスタンプする方法はありますか？

私は子供のテンプレートメソッド（thatのような）をオーバーライドしようとしていますが、これまでのところ私は失敗しました。

私がしようとしているのは、ペーパードロップダウンメニューを拡張して、ドロップダウンメニューの入力機能（検証など）をすべて手作業で配線せずに「ラッパー」コンポーネント。

Answer 1

方法が見つかりました！それはちょうどあなたの代わりにスタンプしたい子供のノードと親のスロットのノードを交換だ、ここでは例です：

<dom-module id="custom-child"> 
 
    <template> 
 
    <what-you-want-to-stamp slot="parent-slot-name"></what-you-want-to-stamp> 
 
    </template> 
 

 
    <script> 
 
    (() => { 
 
     const CustomParent = customElements.get('custom-parent') 
 

 
     let memoizedTemplate 
 
     class CustomChild extends CustomParent { 
 
     static get is() { 
 
      return 'custom-child' 
 
     } 
 

 
     static get template() { 
 
      if (!memoizedTemplate) { 
 
      memoizedTemplate = Polymer.DomModule.import(this.is, 'template') 
 
      let whatYouWantToStamp = memoizedTemplate.content.querySelector('what-you-want-to-stamp') 
 

 
      let parentTemplateContent = document.importNode(CustomParent.template.content, true) 
 
      let slot = parentTemplateContent.querySelector('slot') 
 

 
      memoizedTemplate.content.insertBefore(parentTemplateContent, whatYouWantToStamp) 
 
      memoizedTemplate.replaceChild(whatYouWantToStamp, slot) 
 
      } 
 

 
      return memoizedTemplate 
 
     } 
 
     } 
 

 
     customElements.define(CustomChild.is, CustomChild) 
 
    })() 
 
    </script> 
 
</dom-module>