1

私は Polymer.js で最初の一歩を踏み出しましたが、疑似要素の作成に苦労しています。

これは私が試したものです：

私のホストドキュメントでは：

<style type="text/css">
  #host::x-a-cool-test {
    color: green;
  }
</style>

<div id="host">
  <my-custom-element></my-custom-element>
</div>

私のカスタム要素で：

<element name="my-custom-element">
  <template>
    <style>
      @host {
        * { display: block; color: blue; }
      }          
     </style>
     <div id="group" pseudo="x-a-cool-test">
        just some text
     </div>
  </template>
  <script>
    Polymer.register(this);
  </script>
</element>

それはjust my text青色で表示されます。thisによると、にラップされたルール@hostは、親ページのどのセレクターよりも特異性が高いため、それは正しいです。

私の質問:

color: blueテンプレートのブロック内から削除する@hostと、テキストは黒で表示され、予想どおり緑では表示されません。何故ですか？？？

4

1 に答える 1

2

このプランカーは、あなたが望むように機能すると思います。基本的に、CSS 疑似要素はカスタム要素 (この場合は ) に直接適用する必要がありますmy-custom-element。私はそれに切り替えid="host"て（親の代わりにdiv）、コードが機能しました。

<div>
  <my-custom-element id="host"></my-custom-element>
</div>

注: @host のオーバーライドの性質は変更される可能性があります。一部 (私自身を含む) は、デフォルトのフォールバック スタイルを提供するためのものであるべきだと考えています。この場合、ホスト ドキュメントのルールは @host ルールをオーバーライドし、その逆ではありません。

于 2013-06-24T19:45:01.367 に答える