[w3c/webcomponents] CSS scoping for @keyframes in ::slotted(*) (#748)

I define css keyframe animations into a `shadowRoot`, and want to apply the animation to a distributed element. The `shadowRoot` looks like this:
```html
<style>
  div, ::slotted(*) {
    position: relative;
    left: 0;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: move-animation;
  }

  @keyframes move-animation {
    50% { left: 200px; }
  }
</style>

<slot></slot>
<div>moving? (in shadowRoot)</div>
```
I'd expect the `@keyframes` to be applied to elements in the shadowRoot (e.g. the `<div>`) and any distributed element, while keeping the `@keyframes` scoped (aka other elements shouldn't be able to use the same `animation-name`)
Only Safari seems to match this behavior, while in Chrome (stable, canary) and Opera this the distributed elements are not animating. Here the repro http://jsbin.com/raqamon/1/edit?html,output

Is this a browser bug? I couldn't find the behavior described in the [CSS Scoping spec](https://drafts.csswg.org/css-scoping-1/).

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/748