具有 HTML 导入的 Polymer 自定义元素样式

Question

我有一个自定义元素正在使用通过 HTML 导入导入的样式。

从 Chrome 稳定版 (35.0.1916.114) 和 Canary (37.0.2008.2 canary) 开始，这些样式不再应用于自定义元素内定义的模板。 Safari (7.04) 和 Firefox Aurora [29.0a2 (2014-02-11)] 看起来不错。

Chrome 有回归吗？

例如我的 imports.html 看起来像：

<link rel="stylesheet" href="/assets/stylesheets/libs/bootstrap.min.css" media="screen">
<script src="/assets/javascripts/libs/jquery.min.js" type="text/javascript"></script>
<script src="/assets/javascripts/libs/bootstrap.min.js" type="text/javascript"></script>

我的聚合物元素定义如下：

<link rel="import" href="imports.html">
<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="x-test">
<template>
  <select id="test">
    <option template repeat="{{ item in items }}" name="{{ item.id }}">
      {{ item.value }}
    </option>
  </select>
</template>
<script type="text/javascript">
  (function() {
    Polymer('x-test', {
      ... 
    });
  })();
</script>
</polymer-element>

正在使用的聚合物版本是：

"platform": "Polymer/platform#0.2.4",
"core-action-icons": "Polymer/core-action-icons#0.2.4"
"version": "0.2.4"

Answer 1

Chrome 35 使用的是真正的 ShadowDOM，您会看到 ShadowDOM 样式封装的效果。 polyfill 版本不同是因为它不完全支持 ShadowDOM 样式范围。

如果您希望 boostrap 样式应用于 shadow dom 中的元素，您需要在聚合物元素模板中包含样式表。否则，重写规则以使用::shadow 和/deep/。

更多信息：

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-disbtributed-nodes
• http://www.polymer-project.org/articles/styling-elements.html
• http://www.polymer-project.org/docs/polymer/styling.html

Answer 2

由于在每个模板元素中包含样式表并不容易，所以我认为应该提供一个特殊的引导程序，将/deep/ 添加到它的选择器中。

比如breadcrumb，应该改成

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.breadcrumb > li {
  display: inline-block;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.breadcrumb > .active {
  color: #999;
}

到

body /deep/ .breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}
body /deep/ .breadcrumb > li {
  display: inline-block;
}
body /deep/ .breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
body /deep/ .breadcrumb > .active {
  color: #999;
}

这并不容易，或者应该很容易做到……

那么，@ebidel，有什么建议吗？