2

Shadow DOM にリンクを生成するカスタム<my-header>要素があり、周囲のページの他のリンクと同じスタイルにしたいと考えています。古い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