聚合物@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泄漏

回答

相关问题