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 diseñar contenido dentro de una shadow root.

  • El combinador /deep/ actuará como selector subordinado. x-foo /deep/ div funcionará como x-foo div.
  • El seudoelemento ::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 decidieron esto en la reunión de Web Components de abril de 2015.

La preocupación principal de 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.

Se está avanzando la especificación de Partes de sombras de CSS como alternativa a los selectores de perforación de sombras. Con estas, se permitirá que el autor de un componente exponga elementos con nombre de una manera que preserve la encapsulación y permita a los autores de páginas definir el diseño de 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 necesitar cambiar nada en tu sitio.

Puedes usar Chrome Canary para verificar que tu sitio no se dañe con estos nuevos cambios. Si observas problemas, intenta quitar cualquier uso de ::shadow y /deep/. Si es demasiado difícil quitar el uso de estos selectores, considera cambiar del shadow DOM nativo al polyfill con sombreado del DOM. Solo debes realizar este cambio si tu sitio se basa en un shadow DOM nativo v0.

Más información

Intent de quitar | Seguimiento de Chromestatus | Error de Chromium