css - 直接在 polymer 中设计元素样式是不好的做法吗？

Question

例如我可以做下一件事:

<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>

Answer 1

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

像 /deep/ 这样的选择器可以深入到元素中，这使得从外部覆盖样式变得很容易，例如用于主题化或自定义。来自外部的样式也具有更高的优先级，以简化此过程。

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

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