Question

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

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

Chrome中是否存在回归？

E.g。我的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样式应用于阴影dom侧面的元素，则需要将样式表包含在polymer-element模板中。否则，请重写规则以使用::shadow和/deep/。

更多信息：

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，有什么建议吗？

HTML导入的聚合物自定义元素样式

2 个答案: