mise à jour 2 ::slotted
::slotted
est désormais pris en charge par tous les nouveaux navigateurs et peut être utilisé avec ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
mise à jour 1 :: ng-deep
/deep/
a été obsolète et remplacé par ::ng-deep
.
::ng-deep
est également déjà marqué comme obsolète, mais aucun remplacement n'est encore disponible.
Lorsque ViewEncapsulation.Native
est correctement pris en charge par tous les navigateurs et prend en charge le style à travers les frontières shadow DOM, ::ng-deep
sera probablement abandonné.
original
Angular ajoute toutes sortes de classes CSS au HTML qu'il ajoute au DOM pour émuler l'encapsulation CSS shadow DOM afin d'éviter que les styles ne saignent à l'intérieur et à l'extérieur des composants. Angular réécrit également le CSS que vous ajoutez pour correspondre à ces classes ajoutées. Pour le HTML ajouté en utilisant [innerHTML]
ces classes ne sont pas ajoutés et le CSS réécrit ne correspond pas.
Comme solution de contournement, essayez
- pour CSS ajouté au composant
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
background-color: blue;
}
- pour CSS ajouté à
index.html
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
background-color: green;
}
>>>
(et l'équivalent /deep/
mais /deep/
fonctionne mieux avec SASS) et ::shadow
ont été ajoutés dans 2.0.0-beta.10. Ils sont similaires aux combinateurs CSS shadow DOM (qui sont obsolètes) et ne fonctionnent qu'avec encapsulation: ViewEncapsulation.Emulated
ce qui est la valeur par défaut dans Angular2. Ils fonctionnent probablement aussi avec, ViewEncapsulation.None
mais ne sont alors ignorés que parce qu'ils ne sont pas nécessaires. Ces combinateurs ne sont qu'une solution intermédiaire jusqu'à ce que des fonctionnalités plus avancées pour le style croisé soient prises en charge.
Une autre approche consiste à utiliser
@Component({
...
encapsulation: ViewEncapsulation.None,
})
pour tous les composants qui bloquent votre CSS (dépend de l'endroit où vous ajoutez le CSS et de l'emplacement du HTML que vous souhaitez styliser - il peut s'agir de tous les composants de votre application)
Mettre à jour
Exemple Plunker
index.html
?