оновлення 2 ::slotted
::slotted
тепер підтримується всіма новими браузерами і ними можна користуватися ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
оновлення 1 :: ng-deep
/deep/
був застарілим і замінений на ::ng-deep
.
::ng-deep
також вже позначено застарілим, але заміни ще немає.
Якщо ViewEncapsulation.Native
належним чином підтримано всі браузери та підтримується стилізація через тіньові межі DOM, ::ng-deep
ймовірно, буде припинено.
оригінальний
Angular додає всі види CSS-класів до HTML, який додає до DOM, щоб імітувати тіньову інкапсуляцію CSS DOM для запобігання стилів кровотечі в компонентах та поза ними. Angular також переписує CSS, який ви додаєте, щоб відповідати цим доданим класам. Для HTML, доданих за допомогою [innerHTML]
цих класів, не додається, і переписаний CSS не відповідає.
Як вирішити спробу
- для CSS, доданого до компонента
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
background-color: blue;
}
- для CSS додано до
index.html
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
background-color: green;
}
>>>
(і еквівалент, /deep/
але /deep/
краще працює з SASS) і ::shadow
додані в 2.0.0-beta.10. Вони схожі на тіньові комбінатори CSS DOM (які застаріли) і працюють лише з encapsulation: ViewEncapsulation.Emulated
типовими умовами в Angular2. Вони, ймовірно, теж працюють, ViewEncapsulation.None
але потім ігноруються лише тому, що вони не потрібні. Ці комбінатори є лише проміжним рішенням до тих пір, поки не підтримуються більш вдосконалені функції для міжкомпонентних стилів.
Інший підхід - використання
@Component({
...
encapsulation: ViewEncapsulation.None,
})
для всіх компонентів, які блокують ваш CSS (залежить від того, куди ви додаєте CSS та де HTML, який ви хочете стилювати - це можуть бути всі компоненти у вашій програмі)
Оновлення
Приклад Plunker
index.html
?