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

我有一个使用通过HTML导入导入的样式的自定义元素。带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"

来源

2014-05-22 Rahul

的Chrome 35是利用真实ShadowDOM和你”重新看到ShadowDOM风格封装的效果。 polyfill版本不同，因为它不完全支持ShadowDOM样式范围。

如果您希望将自动增益样式应用于阴影模型中的元素，则需要在聚合物元素模板中包含样式表。否则，重写规则使用::shadow和/deep/。

更多信息：

来源

2014-05-23 01:06:17 ebidel

您是否建议在主机页面（通过HTML导入）并使用':: shadow'和'/ deep /'或定义模板带入样式的单个自定义元素来使用单个引导程序导入，浏览器取消了对样式表的网络请求（因为这些样式可能嵌入在多个自定义元素中？） – Rahul

使用通用元素来引入样式不是可行的解决方案，因为常用元素的样式本身是有作用域的。所以我想它更容易将样式表包含在每个需要它们的模板元素中。 – Rahul

@ebidel :: shadow和/ deep /已被弃用，可能是替代选项？ –

，因为它不是容易包含在每一个templete元素的样式，所以我觉得应该提供一个特殊的启动，将/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，有什么建议？

来源

2014-05-25 12:26:39 liudongmiao

为什么在每个使用它的元素中包含bootstrap的css是不是很容易？大量使用/ deep /打破Polymer提供的样式封装的CSS。开始使用有点棘手，但总体来说更好。相反，我认为最好有适当的web组件实现bootstrap的元素。 –

在这种情况下，引导程序的css将被加载多次而不是一次。所以如果所有的自定义元素都应该具有相同的样式，那么不必为每个自定义元素加载相同的CSS。否则，应该单独加载css，而不用引导程序'less'不支持的'/ deep /'。从ShadowDOM的设计来看，CSS不应该支持样式的全局范围，但是那个时候，没有聚合物，我没有什么可以测试的。 – liudongmiao

包括引导程序的CSS（在每个自定义元素中）都有效，但违反了DRY原则。不幸的是，这些选项似乎是：a）使用/ deep /并修改bootstrap的样式或b）在每个元素声明中包含CSS。不知道，如果有另一种方法来解决这个问题。 – Rahul

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

回答

相关问题