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/组合器的样式可能会导致性能问题，尤其是在本机不支持shadowDOM但使用polyfill的浏览器上。

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

Answer 2

组件样式的详细程度（以及间接复杂性）是值得关注的标准。我个人认为单文件组件更容易维护。

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

提供外部自定义处理。
动态更新一些css属性，例如元素框高度。

在聚合物中直接定型元素是不好的做法吗？

2 个答案: