如何在声明它的同一规则中使用 CSS 变量

Question

在我的自定义元素的定义中，我有以下代码：

<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，但没有找到相关内容。这里有什么问题？如何将 CSS 自定义属性与 Polymer 一起使用？

Answer 1

Polymer 1 的 CSS 垫片（默认启用）显然不会在使用它的同一规则中处理 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>

但是，您可以在导入 polymer.html 之前使用声明的 global setting (useNativeCSSProperties) 在 Polymer 中启用本机 CSS 属性，这将允许您的代码工作 as-is:

<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>

codepen

如何在声明它的同一规则中使用 CSS 变量

How to use CSS variable in same rule that declares it

html

css

polymer

css-variables

polymer-1.0