CODEWITHSUNDEEP
csspolymer
Rahul
Rahul

Reputation: 21144

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"

Upvotes: 3

Views: 3599

Answers (2)

liudongmiao
liudongmiao

Reputation: 454

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

to

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?

Upvotes: 1

ebidel
ebidel

Reputation: 24119

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:

Upvotes: 3

Related Questions