关于CSS：如何设置扩展HTML元素的聚合物元素的样式


How to style polymer elements that extend HTML elements

我在dart编辑器中创建了默认的示例Web项目，并更改了<click-counter></click-counter>元素以扩展DivElement，因此它是：

(我相应地更改了所有HTML和dart文件)。

该元素按预期方式工作，但是在Firefox(30.0)中丢失了所有样式。 (它在Chrome中正常运行)。

这是Firefox中的错误吗？

编辑：为清楚起见，CSS是在clickcounter.html文件中定义的。

相关讨论

当您使用普通的自定义元素时，会将元素样式复制到<head>元素，如果该元素是扩展DOM元素的元素，则不会这样做。

这是CSS Polymer应该在元素的<head>标记中创建的。
(显然，它不会创建这种样式是一个错误。您已经创建了问题https://code.google.com/p/dart/issues/detail?id=19841)

1
2
3
4
5
6
7
8
9
<style shim-shadowdom-css="">style { display: none !important; }
  div[is='click-counter'] div {
    font-size: 24pt; text-align: center; margin-top: 140px;
  }

  div[is='click-counter'] button {
    font-size: 24pt; margin-bottom: 20px;
  }
</style>