Css 如何防止链接在聚合物中破坏样式？

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

技艺
登录

---

有人知道纠正/处理这个问题的正确方法是什么吗？

聚合物成分不是设计用于a href内部的。实现类似功能的最简单方法是向从自定义属性提取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>

document.queryselectoral（'.link'）。addEventListener（'click'，函数（e）{
window.location.href=e.target.getAttribute（'href'）；
})