如何使用 link 标签移除 paper-tabs 的任何额外造型聚合物添加物？

Question

现在我有这两个标签组

<paper-tabs id="scrollableTabs" selected="2" scrollable link>
  <paper-tab> <a href="#link1">1</a> </paper-tab>
  <paper-tab> <a href="#link2">2</a> </paper-tab>
  <paper-tab> <a href="#link3">3</a> </paper-tab>
  <paper-tab> <a href="#top">Top</a> </paper-tab>
</paper-tabs>

<paper-tabs id="scrollableTabs" selected="2" scrollable >
  <paper-tab>1</paper-tab>
  <paper-tab>2</paper-tab>
  <paper-tab>3</paper-tab>
  <paper-tab>Top</paper-tab>
</paper-tabs>

这让我看起来像这样，我不喜欢，更喜欢非 link-able 风格。

像这样 css 玩了一会儿之后

  a {
    text-decoration: none;
    font-weight: 500;
  }

给了我这个好多了，但是我无法让填充工作，因为我假设在使用 link 属性时，填充是在 paper-tabs 元素中指定的。

那么，有什么方法可以去掉锚标签在使用link 属性时在聚合物纸标签组中添加的样式吗？

Answer 1

链接看起来更高，因为它们占据了 100% space 因为以下 CSS.

::content > a {
    height: 100%;
}

因此，通过将 height 设置回默认 auto 应该可以修复它。

a {
    text-decoration: none;
    font-weight: 500;
    height: auto !important;
}

或者如果您不想使用 !important，您可以使用 /deep/ 或 ::shadow 来更新阴影 DOM CSS。这是使用后者的示例。

paper-tab::shadow ::content > a {
    height: auto;
}

在 Firefox 中，上面的 ::shadow 代码不起作用，您可以这样做

paper-tab .tab-content > a {
    height: auto;
}

Answer 2

它在元素文档中：

To use links in tabs, add link attribute to paper-tab and put an element in paper-tab with a tabindex of -1.

Example:

<style is="custom-style">
  .link {
    @apply(--layout-horizontal);
    @apply(--layout-center-center);
  }
</style>

<paper-tabs selected="0">
  <paper-tab link>
    <a href="#link1" class="link" tabindex="-1">TAB ONE</a>
  </paper-tab>
  <paper-tab link>
    <a href="#link2" class="link" tabindex="-1">TAB TWO</a>
  </paper-tab>
  <paper-tab link>
    <a href="#link3" class="link" tabindex="-1">TAB THREE</a>
  </paper-tab>
</paper-tabs>

https://elements.polymer-project.org/elements/paper-tabs

如何使用 link 标签移除 paper-tabs 的任何额外造型聚合物添加物？

How can I remove any additional styling polymer adds for paper-tabs with the link tag?

css

polymer