扩展 Polymer 3 中的纸张输入答案

【问题标题】：Extends paper input in Polymer 3扩展 Polymer 3 中的纸张输入
【发布时间】：2019-02-14 16:12:21
【问题描述】：

我正在尝试从 Polymer 3 扩展纸张输入组件，就像文档中说的那样，但我不能。 https://polymer-library.polymer-project.org/3.0/docs/devguide/dom-template#inherit

在下一个示例中，您可以尝试使用 sn-p。问题是纸张输入的导入没有 PaperInputElement 导出，所以我无法导入。你必须在这里看到：https://unpkg.com/@polymer/polymer/polymer-element.js?module

你能帮帮我吗？

<script type='module'>
  import 'https://unpkg.com/@polymer/paper-input@3.0.1/paper-input.js?module';
    import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';

  class DmInput extends PaperInputElement {
      static get template() {
          return html`
              <style>

              </style>
              <p>hi</p>
              <p>${super.template}</p>
              `;
      }
  }

  window.customElements.define('dm-input', DmInput);


</script>
<dm-input></dm-input>

【问题讨论】：

不能只说不能扩展组件；你必须描述你遇到的问题。您在控制台中看到了哪些错误？页面上出现了什么？你写了什么代码？为了获得帮助，您必须更加具体。

标签： javascript polymer components extends polymer-3.x

【解决方案1】：

我相信您在这里尝试导入错误的文件，Paper-input 只是一个使用 PaperInputBehavior 的 ui 组件。在这种情况下，尝试将 PaperInputElement 替换为输入元素使用的所有函数、属性和事件都来自它的行为。

  class DmInput extends PaperInputBehavior {
      static get template() {
          return html`
              <style>

              </style>
              <p>hi</p>
              <p>${super.template}</p>
              `;
      }
  }

【讨论】：