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 样式系统的几个特殊功能：

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

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

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

于 2016-11-17T00:33:02.547 回答
0

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

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

您可以在 Eric Bidelman 的 Shadow DOM v1 入门中阅读更多关于 stylehooks 的信息

于 2016-11-16T21:39:20.170 回答