Polymer 2.0 PolymerElementsの拡張方法app-layoutとapp-drawer

Question

Polymer 2.0の新機能で、カスタム要素の作成を試みています。

私は自分のカスタム要素を拡張することができ、うまくいきます。私は、ここで見つけたPolymerElementsアプリレイアウトの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-drawerのようなapp-layout要素を使用できます。

AppLayoutという名前が間違っていますか？私はPolymer.Applayoutなどのような異なる名前を試しましたが、それと同じエラーです。私は同じbower_componentsフォルダにある自分のカスタム要素を拡張しようとしましたが、エラーなしで動作します。

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

お勧めはありますか？ありがとう！

Answer 1

私は、このサンプルでは、​​私はこのことができます願ってい<app-layout>

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

の<app-drawer>要素を拡張しますhereとhere

を働く何かを見つけるために管理します。これは現時点で私のために働いています。私はこの議論を通じてhereを読んで、拡張するときに何が起こっているのかを明確にしています。これを行うより良い方法があれば、私の答えを追加/編集してください。乾杯！