聚合物@keyframes泄漏

我有一個由兩個元素組成的簡單聚合物應用程序。第一個元素具有第二個元素x-inner，在其本地dom中。在x-inner元素中，我定義了一個名爲的旋轉的關鍵幀動畫，它應用於：host上。在x應用程序中，我也應用相同的動畫名稱旋轉，但關鍵幀動畫未定義。雖然，旋轉動畫適用於這兩個元素。在我看來@keyframe從內部元素泄漏出來。聚合物@keyframes泄漏

這是預期的行爲嗎？或者我不正確地定義@keyframe動畫？

請參閱我的jsbin爲例：jsbin

來源

2016-10-28 Emil Billberg

這是因爲您正在使用「Shady」 DOM，這doen't真正隔離組件CSS樣式，作爲一個真正的影子DOM會做。

嘗試定義shadow而不是shady，它會起作用。

jsbin example

來源

2016-10-28 10:02:54 Supersharp

是的，你是正確的，將在影子DOM（僅適用於Chrome瀏覽器現在支持）工作。這是否意味着我們必須爲我們創建的所有關鍵幀動畫定義唯一的名稱。我以爲這是幕後聚合物陰暗處理你的東西嗎？ –

是的......或者你可以嘗試陰影填充（它會自動完成），但我沒有用關鍵幀測試 – Supersharp

好吧我會接受你的答案，然後如果這是陰暗的dom中的預期行爲。我還有一個問題。如果我使用shadow dom並在父級中定義關鍵幀動畫，我仍然可以在子級中使用關鍵幀動畫。這不可能是影子dom中的預期行爲？ –

聚合物@keyframes泄漏

回答

相關問題