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>

如何防止链接破坏Polymer中的样式？

1 个答案: