css - context - ng-deep angular 5

¿Cómo y dónde usar:: ng-deep?

Question

Soy nuevo en Angular 4, ¿podría alguien explicarme cómo y dónde usar ::ng-deep en Angular 4?

En realidad, quiero sobrescribir algunas de las propiedades CSS de los componentes secundarios de los componentes principales. Además, ¿es compatible con IE11?

Answer 1

Asegúrese de no perderse la explicación de :host-context que está directamente arriba de ::ng-deep en la guía angular: https://angular.io/guide/component-styles . Descargo de responsabilidad: lo perdí hasta ahora y desearía haberlo visto antes.

::ng-deep menudo es necesario cuando no escribió el componente y no tiene acceso a su fuente, pero :host-context puede ser una opción muy útil cuando lo hace.

Por ejemplo, tengo un encabezado negro <h1> dentro de un componente que diseñé, y quiero la posibilidad de cambiarlo a blanco cuando se muestra sobre un fondo oscuro.

Si no tuve acceso a la fuente, es posible que tenga que hacer esto en el CSS para el padre:

.theme-dark widget-box ::ng-deep h1 { color: white; }

Pero en cambio con :host-context puedes hacer esto dentro del componente.

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute ''outside'' with [attr.theme]="''dark''"

     :host-context([theme=''dark'']) &
     {
         color: white;   // color for dark-theme
     }
 }

Esto buscará en cualquier lugar de la cadena de componentes .theme-dark y aplicará el CSS a h1 si se encuentra. Esta es una buena alternativa a confiar demasiado en ::ng-deep que, aunque a menudo es necesario, es algo así como un antipatrón.

En este caso, & se reemplaza por h1 (así es como funciona sass / scss) para que pueda definir su css ''normal'' y temático / alternativo uno al lado del otro, lo cual es muy útil.

Tenga cuidado de obtener el número correcto de : Para ::ng-deep hay dos y para :host-context solo uno.

Answer 2

Destacaría la importancia de limitar ::ng-deep a solo hijos de un componente al requerir que el padre sea una clase css encapsulada.

Para que esto funcione, es importante usar ::ng-deep después del padre, no antes, de lo contrario se aplicaría a todas las clases con el mismo nombre en el momento en que se carga el componente.

Componente css:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

Plantilla de componentes:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

CSS resultante:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

Answer 3

Por lo general, el combinador /deep/ “shadow-piercing” se puede usar para forzar un estilo hacia child components . Este selector tenía un alias >>> y ahora tiene otro llamado :: ng-deep.

como /deep/ combinator ha quedado en desuso, se recomienda usar ::ng-deep

Por ejemplo:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( ''DETAILS'')"></div>

y css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

se aplicará a componentes secundarios

Answer 4

Solo una actualización:

Debe usar ::ng-deep lugar de /deep/ que parece estar en desuso.

Por documentación:

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.

Lo puedes encontrar https://angular.io/guide/component-styles

Answer 5

::ng-deep , >>> y /deep/ le dan acceso a elementos DOM, que no están en el HTML de su componente. Por ejemplo, si está utilizando material angular, el material angular genera algunos elementos fuera del área de su componente (como el dialog ) y no puede acceder a estos elementos utilizando la forma CSS normal. Si desea cambiar los estilos de esos elementos, debe usar una de esas tres cosas, por ejemplo:

::ng-deep .mat-dialog {
  /* styles here */
}

Por ahora >>> y /deep/ están en desuso, así que mejor use ::ng-deep .

ACTUALIZAR

Las manipulaciones "profundas" en realidad también están en desuso, y antes de seguir este camino, le recomiendo que eche un vistazo a la desactivación del enfoque de encapsulación CSS (que tampoco es lo ideal) y decida qué camino es mejor para su caso. Si decidió deshabilitar la encapsulación, es realmente fácil de lograr:

@Component({
  selector: '''',
  template: '''',
  styles: [''''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Puedes encontrar más información en this artículo.