聚合物中的自定义样式与共享样式

Question

Polymer 支持 <style is="custom-style">，它允许您定义仅适用于元素的样式，例如阴影 DOM.

Polymer 还支持 <dom-module id="shared-styles">，它允许您打包一组可以导入到元素定义中的样式声明。

因此，它们的重点似乎都是让您可以设计聚合物元素的样式。你为什么要用一个而不是另一个？用例似乎有很大的重叠。

额外的混淆：shared-styles 可以导入到 custom-style。你为什么要这样做？为什么不呢？

Answer 1

一个 <dom-module id="my-shared-styles"> 声明了一个可重用的样式模块帽，您可以将其导入到元素或 <style is="custom-style"> 标签中。

在自定义元素中使用

<dom-module id="my-element>
  <template>
    <style include="my-shared-styles"></style>
    ...
  </template>
</dom-module>

或在自定义元素外的 <style> 标签中（例如在 <head> 中）

<head>
  <style is="custom-style" include="my-shared-styles"></style>
</head>

<style is="custom-style"> 仅当您想在不在 <dom-module> 内的样式元素中使用 Polymer CSS 功能（CSS 变量和混入）时才需要。在 <dom-module> 内，只需 <style> 就足够了。

custom-style vs shared-styles in polymer