2017-09-18 59 views
0

我已經使用Polymer 2創建了一個Web組件。其代碼使用es5捆綁的預設轉換爲ES5。該組件部署在CDN上,並在不使用聚合物的第三方頁面上導入。將不同風格應用於Polymer 2.0 Web組件的多個實例

下面是一個使用例如:

https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index1.html

有Web組件引人注目的小部件的3個實例。

如果樣式是在定製樣式內定義的,我可以成功應用自定義CSS類。但是,其他兩個實例在應用樣式後根本不顯示。如果我刪除定製式定義,那麼所有的情況下正常顯示默認的樣式:

https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index2.html

任何想法,爲什麼出現這種情況?我如何將不同的樣式應用於同一個自定義元素的不同實例?以及如何在定義CSS類時保持默認組件樣式工作?

另外,如果我不把風格定義定製式,那麼定義的CSS類有在Chrome沒有影響。爲什麼?在reading the documentation之後,我明白定製樣式有沒有實現Shadow DOM v1的瀏覽器,但Chrome 61是吧?

+0

鈣peut venir德噸Explorateur酒店,恩照essayé德樂mettreà怨婦? J'aiessayédans Firefox et Chrome et je vois aucunproblème。 La1èreet ladernièreinstance sont plus petites et rouges par rapportàla2èmequi est un peu plus grosse et avec legrand orange c'estça? Aussi,as-tuessayéd'importer'polymer'plutôtque'polymer-element'? Le fait d'importer聚合物可以使用聚合物css(avec'@ apply')qui sinon n'est passupportédans tous les explorateurs。 – user544262772

+0

@ user544262772糟糕,鏈接指向錯誤的資源。我已經執行了更新的昨天晚上,而不更新我的帖子中的鏈接。它解釋了爲什麼你沒有得到和我一樣的行爲。如果您重試,您現在應該看到問題。僅供參考,我使用的是目前最新穩定版本的Chrome 61。此外,我與一位Polymer團隊成員進行了討論,對他來說,這似乎也是一個陰影問題。 – Laurent

回答