Encuentro este extraño comportamiento con :focus en Safari 15.1 , en Mac OS Monterey cuando me enfoco en una entrada de texto que está dentro de la raíz oculta de un componente web.

Este error se puede reproducir actualmente en https://xiome.io/

Safari 15.1

Chrome 98 y Firefox

¿Que esta pasando?

Obtengo muchos más esquemas de enfoque de los que esperaba. Parece que Safari está habilitando :focus pseudoclass en todos los elementos entre la raíz de la sombra y la entrada de texto enfocada.

Los componentes web de mi aplicación deben poder aceptar un esquema de enfoque personalizado, para que puedan coincidir con otros sitios web, por lo que los componentes aceptan una variable --focus-outline y la aplican con una regla *:focus debajo de cada raíz oculta, en el tema. css.ts

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

¿Qué puedo hacer para aliviar este problema en Safari mientras mantengo la aceptación de los contornos de enfoque personalizados de mis componentes?