I'm finding this strange behavior with :focus in Safari 15.1, under Mac OS Monterey when I focus on a text input that is within a web component's shadow root.

This bug is currently reproducible at https://xiome.io/

Safari 15.1

Chrome 98, and Firefox

What's going on?

I'm getting a lot more focus outlines than I bargained for. It seems as though Safari is enabling :focus pseudoclass on all elements between the shadow root and the focused text input.

My app's web components need to be able to accept a custom focus outline, so they can match other websites — so the components accept a --focus-outline variable and apply this with a *:focus rule under every shadow root, in theme.css.ts

*:focus {
    outline: var(--focus-outline, 3px solid cyan);
}

What can I do to alleviate this problem in Safari while maintaining my components' acceptance of custom focus outlines?