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 自定义属性不起作用。聚合物只是变成这样：

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

进入这个：

p {
  color: ;
}

但我希望输出为：

p {
  color: brown;
}

演示可以在这里找到：http ://plnkr.co/edit/ogMVPKNvc7SYISomWPWm?p=preview

如果我不使用 Polymer，并在纯 JavaScript 中创建自定义元素，CSS 自定义属性将按预期工作。

我搜索了谷歌，但没有找到相关的东西。这里有什么问题？如何将 CSS 自定义属性与 Polymer 一起使用？

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