Javascript Polymer 2.0如何扩展Polymerement应用程序布局和应用程序抽屉

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

我能够扩展我自己的自定义元素，它工作得很好。我只是想知道我是否可以扩展这里找到的PolymRelations应用程序布局的应用程序抽屉元素

我试过了，但不起作用

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

---

有什么建议吗？谢谢

我设法找到了一些有效的

---

此示例将扩展

，以便更清楚地了解扩展时的情况。如果有更好的方法，请添加/编辑我的答案。干杯
 我设法找到了一些有效的

此示例将扩展
，以便更清楚地了解扩展时的情况。如果有更好的方法，请添加/编辑我的答案。干杯

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

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