[w3c/webcomponents] Undefined specification for @keyframe scope on slotted content (#715)

The specification is missing a definition for the behaviour of `@keyframe` scoping for slotted content. As a result, the two major implementing browsers (Chrome and Safari) show different behaviours.

## Unspecified behaviour

When an animation is defined on a slotted element like so:

```css
  ::slotted(div) {
    animation-name: some-animation;
  }
```

There is no specification that clarifies in which scope the `@keyframes` lookup takes place. (inside the ShadowRoot, or in the scope of the slotted component, in this case the `<div>`)

## Possible resolutions

#### The lookup takes place inside the scope of the ShadowRoot where the element is slotted.

I consider this the expected behaviour, since the `@keyframes` lookup takes place in the same scope where the `animation-name` is defined in CSS.

Safari implements this resolution.

#### The lookup takes place inside the scope where the element is defined.

I consider this unexpected behaviour. It forces Web Component authors to 'leak' animation definitions outside the ShadowRoot in order to animate slotted content.

Chrome implements this resolution


## Reproduction

A reproduction can be found here: https://codepen.io/ruphin/pen/zPQvXw
The animations you see on that page will differ depending on if you are using Safari or Chrome to view the page.


-- 
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/715