Polymer 2.0 如何扩展 PolymerElements app-layout 和 app-drawer

Question

我对 Polymer 2.0 非常陌生，我正在尝试创建自定义元素。

我能够扩展我自己的自定义元素并且它工作正常。我只是想知道我是否可以扩展 PolymerElements app-layout 的 app-drawer 元素在这里找到 https://www.webcomponents.org/element/PolymerElements/app-layout

我试过了，但它不起作用。

<link rel="import" href="/bower_components/app-layout/app-layout.html">

class MyElement extends AppLayout {
  static get is() { return 'my-element'; }
};

customElements.define(MyElement.is, MyElement);

它给了我一个错误说Uncaught ReferenceError: AppLayout is not defined。即使我试图确保 app-layout 具有正确的导入脚本并且我可以使用 app-layout 元素，例如 app-drawer。

是不是 AppLayout 这个名字有问题？我尝试了不同的名称，如Polymer.Applayout 等，但仍然是同样的错误。我尝试扩展我自己的自定义元素，该元素位于同一个 bower_components 文件夹中，它可以正常工作。

class ExtendedElement extends MyElement {
  static get is() { return 'extended-element'; }
};

有什么建议吗？谢谢！

Answer 1

我设法找到了有效的东西 here 和 here

此示例将扩展 <app-layout> 的 <app-drawer> 元素

<dom-module id="my-sub-element">
  <template id="styles">
    <style>
      div {
        background-color: gray;
      }
    </style>
  </template>

  <script>

  (function() {
    let subTemplate;

    class MySubElement extends customElements.get('app-drawer') {
      /**
       * This will return our template inherited from superclass <app-drawer> with our styles inserted
       */
      static get template() {
        if (!subTemplate) {
          // first clone our superclass <app-drawer> template
          let superClass = customElements.get('app-drawer');
          subTemplate = superClass.template.cloneNode(true);

          // here we will get the content of our <style> so we can insert them into the superclass <style>
          // note the added id="styles" in our template tag above
          const subStyle = Polymer.DomModule.import('my-sub-element', 'template#styles').content;

          // get the content of current style from superClass
        const superStyle = subTemplate.content.querySelector('style');

          // append our added style at the bottom of the current style to get higher priority
          superStyle.parentNode.appendChild(subStyle);
        }
        return subTemplate;
      }

    }

    customElements.define('my-sub-element', MySubElement);

  })();

  </script>
</dom-module>

我希望这会有所帮助。目前这对我有用。我通读了这个讨论here，以便更清楚地了解扩展时发生的事情。如果有更好的方法，请添加/编辑我的答案。干杯！