Как я могу препятствовать связям с нарушением стилизации в Polymer?

Question

Что я вижу в Polymer, многие стили унаследованы от окружающего документа.

Так, например, следующий фрагмент кода:

<paper-toolbar> 
     <paper-icon-button icon="book"></paper-icon-button> 
     <span class="title">Polymer Starter Kit</span> 
     <paper-button id="signin-button">Sign In</paper-button> 
    </paper-toolbar> 

будет отображаться значок и кнопку с белым цветом переднего плана и сделать некоторые вещи промежутку.

Однако, если добавить ссылку, то сломает наследство стиля:

<paper-toolbar> 
     <a href="/"><paper-icon-button icon="book"></paper-icon-button></a> 
     <span class="title">SkillCraft</span> 
     <paper-button id="signin-button">Sign In</paper-button> 
    </paper-toolbar> 

Кто-нибудь знает, что правильный способ, чтобы исправить это/дело с этим?

Answer 1

Полимерные компоненты не предназначены для использования внутри href. Самый простой способ добиться подобной функциональности - добавить событие click к компоненту, который вытаскивает URL из пользовательского атрибута.

<paper-icon-button class="link" icon="book" href="/"></paper-button> 

<script> 
    document.querySelectorAll('.link').addEventListener('click', function(e) { 
    window.location.href = e.target.getAttribute('href'); 
    }) 
</script>