Polymer 2：如何扩展一个带有插槽的元素，然后在该插槽中标记 children 模板？

Question

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

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

我想做的是扩展 paper-dropdown-menu 以始终具有特定的下拉内容，同时保留所有 paper-dropdown-menu 输入功能（验证等），而无需全部手动接线带有 "wrapper" 组件。

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>

Polymer 2：如何扩展一个带有插槽的元素，然后在该插槽中标记 children 模板？

Polymer 2: How to extend an element with a slot, then stamp children template in that slot?

polymer

polymer-2.x