Polymer 2：如何使用插槽扩展元素，然后在该插槽中标记子模板？答案

【问题标题】：Polymer 2: How to extend an element with a slot, then stamp children template in that slot?Polymer 2：如何使用插槽扩展元素，然后在该插槽中标记子模板？
【发布时间】：2017-08-28 22:03:29
【问题描述】：

我将如何扩展在其模板中具有插槽的元素，并在该插槽中标记我的子元素的 dom？

我正在尝试覆盖孩子的模板方法（如that），但到目前为止我没有成功。

我想要做的是将纸质下拉菜单扩展为始终具有特定的下拉内容，同时保留所有纸质下拉菜单输入功能（验证等），而无需手动接线“包装”组件。

【问题讨论】：

标签： polymer polymer-2.x

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

【讨论】：