具有HTML导入的聚合物自定义元素样式 [英] Polymer custom element styles with HTML imports

问题描述

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

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

从Chrome稳定版（35.0.1916.114）和Canary（37.0）开始。 2008.2 canary），那些样式不再应用于在自定义元素内定义的模板。

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.

Chrome浏览器有回归吗？

Is there a regression in Chrome ?

例如我的imports.html类似：

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"

推荐答案

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

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.

如果你想要boostrap样式应用到你的影子dom的元素，你需要包括聚合物元素模板内的样式表。否则，重写规则以使用 :: shadow 和 / deep / 。

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

更多信息：

• http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-disbtributed-nodes < a>


• http：// www。 polymer-project.org/articles/styling-elements.html


• http://www.polymer-project.org/docs/polymer/styling.html

• 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

这篇关于具有HTML导入的聚合物自定义元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！