Question

我需要在多个Polymer元素之间共享样式。是否可以创建“styles.html”文件，然后将其导入到我的不同元素中，或者随着应用程序的增长，这会对性能产生影响吗？我知道0.5有一个核心样式，但如果导入也能正常工作，那似乎是不必要的。

styles.html

<style>
  button {
    background: red;
  }
</style>

MY-button.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">

<dom-module id="my-button">
  <template>
    <button>{{text}}</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-button',
    behaviors: [ButtonBehavior]
  })
</script>

Answer 1

正如discussion中关于在chrome中记录的问题所建议弃用/ deep /和:: shadow选择器：

说您的常见样式位于名为
的文件中
共style.css文件

在您的组件中有一个类似这样的样式标记

@import url（＆＃39; /common-style.css'）;

这会反转控件：而不是广播您的样式   任何人都可以使用，风格消费者必须知道他们想要哪种风格   积极请求它们，这有助于避免冲突。用浏览器   缓存，实际上它对这么多的进口基本上没有任何惩罚   可能比通过多个阴影级联样式更快   使用穿孔器的树木。

您可以通过在模板中放置css @import来创建style.css并将其导入组件中。不会有多个网络调用，因为当您的第一个组件加载时，浏览器将对其进行缓存，而对于后续组件，它将从缓存中选择。

我们一直在使用这种技术在我们的生产应用中使用webcomponents，因为/ deep /已被弃用，并且没有任何明显的性能差异。

Answer 2

您可以使用Polymer的共享样式。使用您的样式创建文档：

<dom-module id="shared-styles">
  <template>
    <style>
      /* Your styles */
    </style>
  </template>
</dom-module>

然后将其导入您的元素，并在其定义中将include="shared-styles"添加到<style>代码。

Answer 3

通过为其创建Method1()来共享样式，就像其他自定义元素一样。要在自定义元素中包含共享样式，请使用dom-module。完整的例子如下。

<强>共享styles.html

<style include="style-module-name">

<强>一些-element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
  <template>
    <style>
      /* CSS goes here */
    </style>
  </template>
</dom-module>

Answer 4

从Polymer 1.1开始，聚合物项目作者建议创建和导入样式模块以解决此问题。

要在元素之间共享样式声明，可以在元素中打包一组样式声明。在本节中，为方便起见，持有样式称为样式模块。

样式模块声明一组命名的样式规则，可以将其导入元素定义或自定义样式元素。

查看更多：https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

聚合物共享元素的样式

4 个答案: