Polymer 中的 Mixin、类和自定义元素答案

【问题标题】：Mixin, classes and custom elements in PolymerPolymer 中的 Mixin、类和自定义元素
【发布时间】：2017-03-31 00:13:53
【问题描述】：

我创建了一个名为 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 却没有。我意识到这是为了确保样式不会溢出等。但是......这里的 actual 规则是什么？为什么--red 被设置了并且对模块可用，而green 不是？

【问题讨论】：

this 应该有帮助

标签： html css polymer shadow-dom css-variables

【解决方案1】：

我的具体问题的答案在这里：

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

具体来说：

Polymer 提供了一个自定义元素，用于在主文档中定义样式，可以利用 Polymer 样式系统的几个特殊功能：

自定义样式中定义的文档样式经过填充，以确保它们在没有原生 Shadow DOM 的浏览器上运行时不会泄漏到本地 DOM。

Polymer shim 用于跨范围样式的自定义属性可以在自定义样式中定义。使用 :root 选择器定义适用于所有自定义元素的自定义属性。

因此，文档解释说 :root 选择器专门用于设置跨范围自定义属性...

【讨论】：

【解决方案2】：

我相信这种方式可以提供使用 CSS 自定义属性作为样式占位符来调整内部样式的选项。

.green 没有泄漏的原因是 Shadow DOM 的作用域 CSS 特性。

【讨论】：