Animation 聚合物@关键帧泄漏

我有一个简单的聚合物应用程序，由两个元素组成。第一个元素x-app在其本地dom中有第二个元素x-inner。 在x-inner元素中，我定义了一个称为“旋转”的关键帧动画，并将其应用于：host。在x-app中，我也应用了相同的动画名称“旋转”，但没有定义关键帧动画。尽管如此，旋转动画对这两个元素都有效。在我看来，@keyframe从内部元素泄漏出来

这是预期的行为吗？或者我是否错误地定义了@keyframe动画

---

请参阅我的jsbin以获取一个示例：

这是因为您使用的是“”DOM，它没有像真正的影子DOM那样真正隔离组件CSS样式

尝试定义

shadow

而不是

shady

，它会起作用

---

是的，你是对的，它将在阴影dom中工作（目前仅支持Chrome）。这是否意味着我们必须为我们创建的所有关键帧动画定义唯一的名称。我以为这是dom在幕后为你处理的事情？是的。。。或者您可以尝试shadycss polyfill（它会自动完成），但我没有使用keyframesOk进行测试，如果这是shady dom中的预期行为，我将接受您的答案。不过我还有一个问题。如果我使用阴影dom并在父对象中定义关键帧动画，我仍然可以在子对象中使用关键帧动画。这在shadow dom中不是预期的行为？我使用shadow dom编辑了前面的示例，并在父元素中定义了关键帧动画。不过，子元素（橙色）仍会设置动画。这意味着这个@规则是在阴影之间继承的（这是一个很好的实践）