angular - create - Perforación de sombras dentro de scss

ng set defaults.styleext scss

Question

Estoy usando shadow piercing css para uno de mis estilos. Pero tengo códigos de color dentro de scss que quiero usar en el estilo. ¿Es posible tener la sombra perforando dentro de un archivo scss?

@Component({
selector: ''my-selector'',
styles: [
require(''./my.style.scss''),
'':host >>> .mystyle { background-color: green }''
],
templateUrl: ''./my.template.html''
})

Answer 1

AFAIK >>> no es compatible con SASS porque este combinador no entró en el estándar CSS. Angular tiene su propia implementación para emular su soporte.

AFAIR solo usa un espacio en lugar de >>> tiene el mismo efecto en Angular2 con ViewEncapsulation.Emulated (predeterminado).

Usar un espacio no parece ser equivalente a >>> y /deep/ más.

Ejemplo de Plunker

/deep/ es equivalente a >>> en Angular, pero solo /deep/ funciona bien con SASS.

actualizar

SASS se depreció >>> e introdujo ::ng-deep para soporte angular especial (de ahí el ng- en el nombre).
Las versiones recientes de Angular 4 ya son compatibles con ::ng-deep y también se han depreciado >>> .

En los documentos, se menciona que ::ng-deep también está en desuso, pero esto se debe a un motivo diferente. Cuando todos los navegadores admiten el DOM sombreado con una temática adecuada, ViewEncapsulation.Emulated (predeterminado) se descartará y Native se convertirá en el predeterminado y ::ng-deep se volverá obsoleto.

Answer 2

Aunque >>> y /deep/ se supone que son equivalentes, descubrí que reemplazar el >>> operador con /deep/ funciona cuando se usan archivos .scss .

Answer 3

/deep/ fue compatible de forma nativa en los navegadores como un combinador de descendientes de piercing DOM de sombra, pero de hecho está en desuso (y eliminado en Chrome 63).

Pero, debido a que Angular ofrece (y por defecto) una implementación emulación shadow DOM (que no usa la implementación DOM nativa, su uso de /deep/ no está relacionado con el uso del navegador nativo - sobrecargado para su propia implementación y no generado en el final css. Por lo tanto, el uso de /deep/ in emulated shadow estilo DOM encapsulación ( encapsulation: ViewEncapsulation.Native ) todavía funciona en todos los navegadores.

Sin embargo, debido a que la idea es pasar a la encapsulación nativa (desde emulado), Angular obsoleto /deep/ en su propia implementación emulada (aunque todavía funciona, y técnicamente siempre podría).