1
我爲我的網站的新版本使用Polymer，並且在所有瀏覽器中顯示數據綁定背景顏色時遇到了一些問題。主機元素的聚合物背景顏色
Here is a live example。在Chrome中它的工作原理爲人們所期望的，與顯示了一個紅色的背景顏色（下圖中描繪的）
現在，在Firefox和IE 11的背景色顯示不出來，導致在這樣的事情：
現在，我希望這事做與填充工具，因爲Chrome是原生支持自定義元素的唯一瀏覽器，如圖in the browser compatibility page
這裏是我的代碼（同活生生的例子）：
<polymer-element name="leiding-card" attributes="bgColor">
<template>
<style>
:host{
display: block;
position: relative;
padding: 20px;
border-radius: 2px;
background-color: {{bgColor}};
}
.profilePic{
width: 50px;
height: 50px;
border-radius: 25px;
margin: 10px;
background-size: 50px 50px;
}
</style>
<link rel="stylesheet" href="default_styles.css">
<paper-shadow z="1" animated="true"></paper-shadow>
<div class="white">
<content select="h1"></content>
<template repeat="{{p in people}}">
<div layout horizontal wrap around-justfied>
<div class="profilePic" center style="background-image: url({{p.profilePic}});"></div>
<div style="margin-right: 10px;">
<p>{{p.name}} {{p.lastname}}</p>
<h4>{{p.email}}</h4>
</div>
</div>
</template>
</div>
</template>
<script>
Polymer('leiding-card',{
ready: function(){
this.people = [
{name: "John", lastname: "Snow", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-3.jpg", email: "[email protected]"},
{name: "Other", lastname: "Bastard", profilePic: "http://lorempixel.com/output/cats-q-c-640-480-8.jpg", email: "[email protected]"}
]
}
});
</script>
</polymer-element>
我已經嘗試在做的東西一樣polyfill-next-selector { content: ':host'; }，但我真的不能在網上找到它的一個例子，平時我沒有看到任何直接將樣式應用於:host的問題。