2

我有一个自定义<my-header>元素，它在 shadow dom 中生成一个链接，我希望它的样式与周围页面中的其他链接相同。旧applyAuthorStyles属性是一个不错的方法来实现这一点，尽管它有自己的问题。现在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>
4

1 回答 1

0

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

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

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

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

有一些更高级的解决方案涉及额外的自定义元素来管理动态、共享的样式表，但这是一个更大的话题。Polymer 不久将围绕这些生产线提供某种解决方案。

于 2014-02-24T23:01:52.983 回答