Question

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

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

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

Answer 1

找到了办法！它只是用您要标记的子节点替换父节点的节点，这是一个例子：

＆＃13;

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

＆＃13;

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

1 个答案: