1

my-mixins.html次を含むという名前のファイルを作成します。

<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
  :root {
    --red: {
      color: red;
    };
  }

  // This won't work
  .green: {
    color: green;
  }
</style>

次に、要素を作成しますmy-element.html。

<link rel="import" href="bower_components/my-mixins/my-mixins.html">

<link rel="import" href="../polymer/polymer.html">

<dom-module is="my-element">
  <style>
    .red {
      @apply(--red);
    }
    ...
  </style>

  <p class="red">This is red</p>
  <p class="green">This is not green</p>

  <script>
    Polymer({
      is: 'my-element'
    });
  </script>

</dom-module>

機能している間--red(想定どおり)、機能.greenしませんでした。これはスタイリングがこぼれないようにするためなどだと思いますが…実際のルールは何ですか？--redなぜ設定され、モジュールで利用できるようになったのですかgreen?

4

2 に答える 2

1

私の特定の質問に対する答えはここにありました：

https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style

具体的には：

ポリマーはPolymer のスタイリング システムのいくつかの特別な機能を利用できる、メイン ドキュメントでスタイルを定義するためのカスタム要素:

custom-style で定義されたドキュメント スタイルは、ネイティブの Shadow DOM を持たないブラウザーで実行する場合に、ローカル DOM にリークしないように shimmed されます。

クロススコープ スタイル設定のために Polymer の shim で使用されるカスタム プロパティは、カスタム スタイルで定義できます。:root セレクターを使用して、すべてのカスタム要素に適用されるカスタム プロパティを定義します。

:rootそのため、ドキュメントでは、クロススコープのカスタム プロパティを設定するために特にセレクターを使用することを説明しています...

于 2016-11-17T00:33:02.547 に答える
0

CSS カスタム プロパティをスタイル プレースホルダーとして使用して内部スタイルを微調整するオプションを提供することは、そのように機能すると思います。

リークしていない理由.greenは、Shadow DOM のスコープ付き CSS 機能によるものです。

スタイルフックの詳細については、Eric Bidelman の Shadow DOM v1 入門書を参照してください。

于 2016-11-16T21:39:20.170 に答える