Polymer custom element styles with HTML imports

问题

I have a custom element which is using styles that are being imported via an HTML import.

As of Chrome Stable (35.0.1916.114) and Canary (37.0.2008.2 canary), those styles are no longer being applied to the templates defined inside the custom element. Safari (7.04) and Firefox Aurora [29.0a2 (2014-02-11)] looks good.

Is there a regression in Chrome ?

E.g. my imports.html looks like:

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

My polymer element definition looks like:

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

Polymer version being used is:

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

回答1:

Chrome 35 is using real ShadowDOM and you're seeing the effects of ShadowDOM style encapsulation. The polyfill version is different is because it doesn't fully support ShadowDOM style scoping.

If you want boostrap styles to apply to elements in side your shadow dom, you need to include the stylesheet inside the polymer-element template. Otherwise, rewrite rules to use ::shadow and /deep/.

More info:

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

回答2:

As it's not easier to include the stylesheet in every templete element, so I think a special bootstrap should be provided, adding /deep/ to it's selectors.

For example, for breadcrumb, it should be changed from

.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;
}

It's not easy to do so, or should be easy to do so...

Then, @ebidel, any advice?

来源：https://stackoverflow.com/questions/23818788/polymer-custom-element-styles-with-html-imports

标签

css

polymer