How can I use the surrounding page's style for a link, in a custom element?

StackOverflow https://stackoverflow.com/questions/21947841

题

I have a custom <my-header> element that generates a link in shadow dom, which I'd like to have styled the same as the other links in the surrounding page. The old applyAuthorStyles attribute was a decent way to accomplish that, although it had its own problems. Now that applyAuthorStyles has been removed, the option I see is to have embedders define their global styles as:

a, * ^ a { color: green; }

and so on, which intrudes into the styles of elements that don't want the page's styles.

Is there a better way to do this?

I have some sample code at http://jsbin.com/yusox/1/edit and below. You'll only see the inconsistency if your browser has native Shadow DOM turned on (chrome://flags/#enable-experimental-web-platform-features in Chrome).

<!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>
有帮助吗？

解决方案

intrudes into the styles of elements that don't want the page's styles.

Yes, intrusion will happen if you use *, so instead drive the style for your specific element:

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

Fwiw, I don't think anybody is in love with this syntax, but that's the CSS that is supported today.

There are fancier solutions involving additional custom elements to manage dynamic, shared style-sheets, but it's a larger topic. Polymer will offer some kind of solution around these lines before long.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top