2

例如我可以做接下来的事情：

<polymer-element name="hello-world">
  <template>
    <div style="background-color: red">
      hello world!
    </div>
  </template>
</polymer-element>

此外，我还可以动态地为元素设置样式：

HelloWorld.create() : super.create() {
    createShadowRoot().children = [
        new DivElement()
            ..style.color = SOME_GLOBAL_COLOR
            ..text = 'Hello World!'
    ];
}

代替：

<polymer-element name="hello-world">
  <template>
    <style>
        .somediv {
            background-color: red;
        }
    </style>
    <div class="somediv">
      hello world!
    </div>
  </template>
</polymer-element>
4

2 回答 2

1

这被认为是良好的做法。它提供封装。

选择器 like/deep/可以进入元素，这使得从外部覆盖样式变得容易，例如用于主题或自定义。来自外部的样式也有更高的优先级，这很容易。

使用组合器的样式/deep/可能会导致性能问题，尤其是在原生不支持 shadowDOM 但使用 polyfill 的浏览器上。

我将在组件内部提供基本/默认样式，在元素外部提供特定于站点的自定义。

于 2014-05-22T09:29:58.680 回答
0

组件样式的冗长（以及间接复杂性）是需要关注的标准。我个人发现单文件组件更易于维护。

除了这种组织考虑之外，由于样式元素是模板的一部分，因此可观察（因此已发布）属性可以直接放在 css 中。这非常方便，尤其适用于：

  • 为外部定制提供句柄。
  • 动态更新一些 css 属性，例如元素框高度。
于 2014-04-08T16:41:33.813 回答