Question

我有一个自定义<my-header>元素，它在阴影dom中生成一个链接，我希望它的样式与周围页面中的其他链接相同。旧的applyAuthorStyles属性是实现这一目标的一种不错的方法，尽管它有own problems。现在applyAuthorStyles已被删除，我看到的选项是让嵌入器将其全局样式定义为：

a, * ^ a { color: green; }

等等，它会侵入不需要页面样式的元素样式。

有更好的方法吗？

我在http://jsbin.com/yusox/1/edit及以下有一些示例代码。如果您的浏览器启用了原生Shadow DOM（Chrome中的chrome：// flags / #enable-experimental-web-platform-features），您将只看到不一致。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<title>Test</title>
<style>
  body {max-width: 50ch;}
  a { color: green; text-decoration:none; border-bottom: 1px blue dashed ; }
  a:visited { color: darkgreen;}
</style>
<polymer-element name="my-header" noscript attributes="sec_num">
  <template>
    <style>
      :host { display: block; }
      header { font-weight: bold; margin: 20px 0; }
      header::after { clear:both; display: block; content: " "; height: 0 }
    </style>

    <header>
      <span class="section-number">{{sec_num}}</span>
      <content></content>
      <span style="float:right"><a href="#{{id}}">[{{id}}]</a></span>
    </header>
  </template>
</polymer-element>
</head>
<body>
  <my-header id="first.section" sec_num="1.2">Foo Bar Baz</my-header>
  <a href="http://www.polymer-project.org/">Polymer</a>
</body>
</html>

Answer 1

侵入不需要页面样式的元素样式。

是的，如果您使用*，则会发生入侵，因此请为您的特定元素驱动样式：

a, my-header ^ a, body ^^ my-header ^ a { .. }

Fwiw，我认为没有人喜欢这种语法，但这就是今天支持的CSS。

有更高级的解决方案涉及管理动态共享样式表的其他自定义元素，但这是一个更大的主题。不久之后，Polymer将围绕这些产品线提供某种解决方案。

如何在自定义元素中使用周围页面的样式作为链接？

1 个答案: