actualización 2 ::slotted
::slotted
ahora es compatible con todos los navegadores nuevos y se puede usar con ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
actualización 1 :: ng-deep
/deep/
fue desaprobado y reemplazado por ::ng-deep
.
::ng-deep
también está marcado como obsoleto, pero aún no hay reemplazo disponible.
Cuando ViewEncapsulation.Native
todos los navegadores lo admiten correctamente y admite el estilo a través de los límites de DOM de la sombra, ::ng-deep
probablemente se suspenderá.
original
Angular agrega todo tipo de clases CSS al HTML que agrega al DOM para emular la encapsulación CSS DOM del shadow para evitar estilos de sangrado dentro y fuera de los componentes. Angular también reescribe el CSS que agrega para que coincida con estas clases agregadas. Para HTML agregado usando [innerHTML]
estas clases no se agregan y el CSS reescrito no coincide.
Como una solución alternativa
- para CSS agregado al componente
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
background-color: blue;
}
- para CSS agregado a
index.html
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
background-color: green;
}
>>>
(y el equivalente /deep/
pero /deep/
funciona mejor con SASS) y ::shadow
se agregaron en 2.0.0-beta.10. Son similares a los combinadores CSS DOM de sombra (que están en desuso) y solo funcionan con lo encapsulation: ViewEncapsulation.Emulated
que es el valor predeterminado en Angular2. Probablemente también funcionen, ViewEncapsulation.None
pero solo se ignoran porque no son necesarios. Estos combinadores son solo una solución intermedia hasta que se admitan características más avanzadas para el diseño de componentes cruzados.
Otro enfoque es usar
@Component({
...
encapsulation: ViewEncapsulation.None,
})
para todos los componentes que bloquean su CSS (depende de dónde agregue el CSS y dónde está el HTML que desea diseñar, puede que sean todos los componentes de su aplicación)
Actualizar
Plunker de ejemplo
index.html
?