3

カスタム要素の定義には、次のコードがあります。

<dom-module id="dom-element">
  <style>
    p {
      --test: brown;
      color: var(--test);
    }
  </style>
  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>

  <script>
    Polymer({
      is: "dom-element"
    });
  </script>

</dom-module>

ただし、CSS カスタム プロパティは機能しません。Polymer は次のように変換します。

p {
  --test: brown;
  color: var(--test);
}

これに：

p {
  color: ;
}

しかし、私は出力を次のようにしたい:

p {
  color: brown;
}

デモはここにあります: http://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview

Polymer を使用せず、純粋な JavaScript でカスタム要素を作成すると、CSS カスタム プロパティは期待どおりに機能します。

Google で検索しましたが、関連するものは見つかりませんでした。ここで何が問題なのですか？Polymer で CSS カスタム プロパティを使用するにはどうすればよいですか?

4

1 に答える 1

1

Polymer 1 の CSS shim (デフォルトで有効) は、それを使用する同じルールで CSS 変数宣言を明らかに処理しないため:host、このシナリオでは宣言を移動する必要があります。

<!-- inside dom-module's template -->
<style>
  :host {
    --test: brown;
  }
  p {
    color: var(--test);
  }
</style>


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        :host {
          --test: brown;
        }
        p {
          color: var(--test);
        }
      </style>
      <p>Hello world</p>
    </template>
  </dom-module>
</body>

ただし、をインポートする前に宣言されたグローバル設定 ( useNativeCSSProperties)を使用して、Polymer のネイティブ CSS プロパティを有効にすることpolymer.htmlができます。これにより、コードがそのまま機能するようになります。

<script>window.Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
<!-- import polymer.html here -->


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});
<head>
  <script>window.Polymer = {dom: 'shadow', lazyRegister: 'max', useNativeCSSProperties: true};</script>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        p {
          --test: brown;
          color: var(--test);
        }
      </style>
      <p>Hello world</p>
    </template>
  </dom-module>
</body>

コードペン

于 2017-02-14T17:58:29.123 に答える