Разница между ViewEncapsulation.Native, ViewEncapsulation.None и ViewEncapsulation.Emulated в Angular
Вопрос: Разница между ViewEncapsulation.Native, ViewEncapsulation.None и ViewEncapsulation.Emulated в Angular 2
Может кто-то объяснить, в чем разница между ViewEncapsulation.Native, ViewEncapsulation.None и ViewEncapsulation.Emulated в Angular 2?
Я пытался загуглить и почитать статьи, но не могу понять различия.
У меня есть два компонента: Home (home.ts) - родительский компонент и MyComp (my-comp.ts) - дочерний компонент. Я хочу определить стили в родительском компоненте, которые будут использоваться в дочернем компоненте.
Должен ли я использовать ViewEncapsulation.Native или ViewEncapsulation.None?
Вот код для моего компонента Home:
import {Component, ViewEncapsulation} from 'angular2/core';
import {MyComp} from './my-comp';
@Component({
selector: 'home', // <home></home>
providers: [],
directives: [
MyComp
],
styles: [`
.parent-comp-width {
height: 300px;
width: 300px;
border: 1px solid black;
}
`],
template:`
<my-comp></my-comp>
<div class="parent-comp-width"></div>
`,
encapsulation: ViewEncapsulation.Native
})
export class Home {
}
И вот код для моего компонента MyComp:
import {Component} from 'angular2/core';
@Component({
selector: 'my-comp', // <my-comp></my-comp>
template: `
<div class="parent-comp-width">my-comp</div>
`
})
export class MyComp {
}
Заранее спасибо за помощь!
2 ответ(ов)
Обновление
Если вы хотите, чтобы стили, добавленные в компонент Parent, применялись к компоненту Child, вам нужно установить ViewEncapsulation.None в компоненте Parent, чтобы не препятствовать проникновению стилей.
ViewEncapsulation.Emulated и ViewEncapsulation.Native — это всего лишь два разных способа предотвращения утечки стилей в компоненты и из них. None — единственный вариант, который позволяет стилям пересекать границы компонентов.
Исходная информация
ViewEncapsulation.None— это простой вариант без инкапсуляции.ViewEncapsulation.Emulated(в данный момент по умолчанию в Angular 2) добавляет атрибуты к тегам компонентов и дочерним элементам, а также манипулирует CSS, добавляя атрибуты к селекторам, чтобы стили не смешивались друг с другом. Это сохраняет стили сфокусированными на компонентах, где они добавлены, даже если стили собираются в заголовке страницы при загрузке компонентов.ViewEncapsulation.Nativeсоздает пользовательские элементы с использованием Shadow DOM, где нативная реализация браузера гарантирует область видимости стилей.
Если браузер не поддерживает Shadow DOM нативно, для эмуляции этого поведения потребуются полифилы для веб-компонентов. Это похоже на ViewEncapsulation.Emulated, но полифилы имеют большую стоимость, поскольку они эмулируют множество API браузера, даже если большинство из них никогда не используется. Эмуляция Emulated в Angular добавляет только затраты на то, что действительно используется, и поэтому намного эффективнее для приложений на Angular.
В Angular существуют несколько режимов инкапсуляции стилей, и каждый из них имеет свои особенности:
- Native: Использует нативный Shadow DOM браузера. Перед включением этого режима необходимо проверить поддержку браузеров.
- ShadowDom: Использует нативный Shadow DOM v1 для лучшей кроссбраузерной совместимости и является общим стандартом между браузерами. Обратите внимание на различия между версиями Shadow DOM v0 и v1.
- Emulated: Имитирует поведение Shadow DOM для ограничения области применения CSS для компонентов и добавляет стили в
<head>. - None: Не использует ни Shadow DOM, ни пользовательскую реализацию, например, глобальный CSS, который добавляется в
<head>.
По умолчанию Angular использует режим инкапсуляции стилей ViewEncapsulation.Emulated.
Как выбрать элемент в шаблоне компонента?
Нет провайдера для HttpClient
@Directive против @Component в Angular
Как получить имена элементов перечисления (enum)?
Не удается использовать JSX, если не указан флаг '--jsx'