css - El uso de/deep/y>>> en Angular 2

css-selectors

Question

He estado leyendo sobre este selector y obteniendo respuestas contradictorias.

En: ¿Qué significan / deep / y :: shadow en un selector CSS?

Vemos:

Como Joel H. señala en los comentarios, Chrome ha desaprobado el / deep / combinator, y da un error de sintaxis en IE.

En: https://github.com/Microsoft/vscode/issues/7002

Vemos:

/ deep / ya no existe, así que no creo que debamos admitirlo. >>> es la nueva versión, que probablemente debería ser compatible

Sin embargo, en los documentos de Angular 2: https://angular.io/docs/ts/latest/guide/component-styles.html

Vemos:

El selector / deep / también tiene el alias >>>. Podemos usar cualquiera de los dos indistintamente.

Obviamente, sería prudente confiar en los documentos de Angular 2, pero dudo un poco por toda esta información conflictiva.

De hecho, en la última versión de Microsoft Visual Studio Code, AMBOS /deep/ y >>> crean errores, aunque ambos funcionan a pesar de los errores.

Mi pregunta es doble:

1. ¿Es / profundo / aquí para quedarse? ¿Tenemos alguna fuente, una cita o algo de alguna especificación que diga que será adoptada? ¿O si ha sido oficialmente en desuso?

2. ¿Podemos suprimir este error en Visual Studio Code sin desactivar la comprobación de sintaxis?

Answer 1

1. ¿Es / profundo / aquí para quedarse? ¿Tenemos alguna fuente, una cita o algo de alguna especificación que diga que será adoptada? ¿O si ha sido oficialmente en desuso?

   La sintaxis /deep/ está obsoleta, se vio por última vez en css-scoping en 2014 , y su reemplazo >>> fue obsoleto hace aproximadamente medio año en Chrome 45.

   El concepto completo del combinador descendiente que perfora las sombras está programado para ser eliminado por completo del Shadow DOM . Las implementaciones pueden eliminarlo por completo o alias al combinador descendiente regular (que dependiendo de cómo se implemente Shadow DOM en el futuro puede o no tener sentido).

2. ¿Podemos suprimir este error en Visual Studio Code sin desactivar la comprobación de sintaxis?

   Lamentablemente no.

   Angular permite ambos en encapsulación de vista emulada con fines de compatibilidad, pero se recomienda encarecidamente a los autores que usen >>> en adelante, ya que /deep/ es técnicamente inválido ahora y, por lo tanto, no es compatible con la encapsulación de vista nativa.

Answer 2

De acuerdo con la documentación de Google, todos los principales navegadores van a desaprobar toda la funcionalidad de dicha función. Por lo tanto, el combinador descendente que perfora la sombra está en desuso y se está eliminando el soporte de los principales navegadores y herramientas.

https://angular.io/guide/component-styles

Lo que se puede usar que es más oficial y no está en desuso es :: host () y :: host-context

Además, de acuerdo con google :: ng-deep no quedará en desuso y seguirá siendo una opción viable. por lo tanto, se utilizará :: ng-deep.

El / deep / combinator también tiene los alias >>> y :: ng-deep.

Use / deep /, >>> y :: ng-deep solo con encapsulación de vista emulada. Emulado es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Encapsulación de la vista de control. El combinador descendente que atraviesa las sombras está en desuso y el soporte se está eliminando de los principales navegadores y herramientas. Como tal, planeamos eliminar el soporte en Angular (para los 3 de / deep /, >>> y :: ng-deep). Hasta entonces :: ng-deep debería preferirse para una compatibilidad más amplia con las herramientas.