Eliminación de ::shadow y /deep/ en Chrome 63

A partir de Chrome 63, no puedes usar los selectores de perforación de sombras ::shadow y /deep/ para aplicar diseño al contenido dentro de una raíz de sombra.

  • El combinador /deep/ actuará como un selector descendiente. x-foo /deep/ div funcionará como x-foo div.
  • El pseudoelemento ::shadow no coincidirá con ningún elemento.

La decisión de quitar

::shadow y /deep/ dejaron de estar disponibles en la versión 45 de Chrome. Todos los participantes de la reunión de componentes web de abril de 2015 tomaron esta decisión.

La principal preocupación con los selectores de perforación de sombras es que infringen la encapsulación y crean situaciones en las que un componente ya no puede cambiar su implementación interna.

La especificación de CSS Shadow Parts se está avanzando como una alternativa a los selectores de perforación de sombras. Las partes de sombra permitiran que un autor de componentes exponga elementos nombrados de una manera que preserve el encapsulamiento y, al mismo tiempo, permita que los autores de páginas puedan aplicar diseño a varias propiedades a la vez.

¿Qué debo hacer si mi sitio usa ::shadow y /deep/?

Los selectores ::shadow y /deep/ solo afectan a los componentes heredados de Shadow DOM v0. Si usas Shadow DOM v1, no deberías tener que cambiar nada en tu sitio.

Puedes usar Chrome Canary para verificar que tu sitio no falle con estos nuevos cambios. Si notas algún problema, intenta quitar el uso de ::shadow y /deep/. Si es demasiado difícil quitar el uso de estos selectores, considera cambiar del Shadow DOM nativo al polyfill de Shadow DOM. Solo debes realizar este cambio si tu sitio depende del Shadow DOM nativo v0.

Más información

Intento de eliminación | Chromestatus Tracker | Error de Chromium