Tab, can you confirm whether this is supposed to work or not.

I just talked with Shane about this. The original intention of the spec was that this was not allowed - @apply was only supposed to be useful in style rules (same as var()).  However, apparently Firefox applies var() in @keyframes (based on the element that the animation is applied to), so we could run @apply the same way.

Plan is to bring this up at the TPAC meeting and decide one way or another.

FWIW, Chrome also applies var() in @keyframes, which I certainly hope continues to be the case.

It feels very natural to use var() and @apply in @keyframes and @media, and it seems odd that the spec would disallow that usage.

Well, it's that there's no element context in the @keyframes rule itself to draw the values from.  It obtains a context only when specified in the context of a given animation. I hadn't intended to rely on that, but it does seem useful, so I'm okay with adding it.  @apply is more complicated, so Shane and I will discuss and hash out the issues, but I'm optimistic that it'll work fine.

Are we still planning to do @apply?

Our current plan of record is no; we're instead going to try and do ::part(), pending agreement from the other vendors.

so there was no solution found for @apply? :/
For me personally @apply worked pretty great even just with the webcomponents polyfill :)
will ::part() be a full replacement? is there a polyfill? could someone point me to more information? I could not find any?

This bug is basically one of the problems with @apply that we got stuck on. Defining a consistent (and intuitive) order for @apply, variable substitution, animation/transition construction, and animation application to work in turns out to be incredibly hard.

From memory, ::part() doesn't have this problem as it doesn't add an extra contribution to the stack of things to do on style resolution. In other respects, however, it's roughly as powerful, particularly when coupled with ::theme().

I believe @9 has a writeup somewhere.

I see - thx for explaining it in more detail :)
any info regarding ::part() or ::theme() would be nice :)

for anyone else who stumbles on this - here is the writeup of the general idea as far as I can see
http://tabatkins.github.io/specs/css-shadow-parts/
https://github.com/tabatkins/specs

PS as noted there: "This spec is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion."