Можно ли расширить полимерный элемент и повторно использовать его стиль?

Question

Я хотел бы создать расширенную кнопку, основанную на «бумажной кнопке». Однако, если я просто сделаю это

<link rel="import" href="../../bower_components/paper-button/paper-button.html"> 

<dom-module id="my-better-button"> 
    <script> 
    Polymer({ 
     is: 'my-better-button', 
     extends: 'paper-button' 
    }); 
    </script> 
</dom-module> 

тогда кнопка теряет все свои стили. Я делаю что-то неправильно?

Я использую Polymer 1.0.

Answer 1

Чтобы создать свой собственный элемент, который использует другой настраиваемый элемент, например, бумажную кнопку, вы захотите создать обертку.

<dom-module id="my-button"> 
    <template> 
    <paper-button> 
     <content></content> 
    </paper-button> 
    </template> 
</dom-module> 

Таким образом, всякий раз, когда вы используете <my-button>Tap Me</my-button> это будет действительно сделать бумажную кнопку, завернутой в моей кнопке.

Хорошим примером является paper-input, который является в основном оберткой для iron-input. Взгляните на нее и посмотрите, как передаются свойства.

Answer 2

Вы можете расширить пользовательские элементы через Behaviors как это:

<dom-module id="my-better-button"> 
    <script> 
    Polymer({ 
     is: 'my-better-button', 
     behaviors: [betterButton] 
    }); 
    </script> 
</dom-module> 

Поведения как Mixins поэтому они, в основном, объект Javascript. Поведение может определять обратные вызовы жизненного цикла, объявленные свойства, атрибуты по умолчанию, наблюдатели и слушатели.

Я предлагаю вам посмотреть это классное видео по этой теме, которые объясняют очень хорошо, как использовать его: https://www.youtube.com/watch?v=YrlmieL3Z0k