帶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導入的聚合物自定義元素樣式

回答

相關問題