Pseudoelements (::before, ::after) generated inside a Shadow Root are not able to use CSS animation keyframes defined inside the same Shadow Root. Instead, they are able to use keyframes defined in the main document outside the Shadow Root. Normal elements (a div, for example) inside the shadow root can use animation keyframes as expected. This behavior is very clear in the provided URL when comparing it to Chrome or Firefox Nightly. https://faithful-string.glitch.me/
<rdar://problem/41393429>
Hm... I'm not reproducing the issue reported by this bug. :host::before and :host::after work using the keyframe animation defined within a shadow tree. What doesn't work is ::before/::after referencing keyframe defined in the outer scope.
Created attachment 460786 [details] Test
keyframe not working in in the shadow DOM has been fixed in the bug 164608.
Chrome Canary 122 and Firefox Nightly 123 are working fine. So adding 'BrowserCompat'.