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 요소를 사용할 수 있습니다.

이름이 잘못된 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을 읽고 확장 할 때 어떤 일이 벌어지고 있는지에 대해 명확하게 생각했다. 더 좋은 방법이 있다면 내 대답을 추가/수정하십시오. 건배!