Что такое View Encapsulation?

View Encapsulation (Инкапсуляция представления) в Angular - это механизм, который позволяет контролировать стиль и поведение компонентов внутри приложения путем ограничения области действия стилей CSS и изоляции компонента от внешнего контекста.

При создании компонента в Angular можно задать один из трех режимов инкапсуляции представления:

  1. Emulated (по умолчанию):

    • Это режим инкапсуляции, который используется по умолчанию в Angular.
    • В этом режиме Angular эмулирует собственные стили компонента путем добавления уникальных CSS-классов к элементам компонента.
    • Стили компонента ограничиваются только его шаблоном и не проникают внутрь других компонентов.
    • Глобальные стили, заданные вне компонента, не влияют на его элементы.

    Пример:

    import { Component } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: `
		<h1>Пример компонента</h1>
		<p class="my-class">Текст внутри компонента</p>
	`,
	styles: [
		`
			.my-class {
				color: red;
			}
		`
	]
})
export class MyComponent {}

  2. None:

    • В этом режиме инкапсуляции Angular не применяет никакой инкапсуляции стилей.
    • Стили компонента применяются глобально и могут влиять на все элементы в приложении.
    • Изменения стилей компонента могут повлиять на другие компоненты и наоборот.

    Пример:

    import { Component, ViewEncapsulation } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: `
		<h1>Пример компонента</h1>
		<p class="my-class">Текст внутри компонента</p>
	`,
	styles: [
		`
			.my-class {
				color: red;
			}
		`
	],
	encapsulation: ViewEncapsulation.None
})
export class MyComponent {}

  3. ShadowDom:

    • В этом режиме инкапсуляции Angular использует встроенный механизм Shadow DOM браузера для изоляции стилей компонента.
    • Стили компонента применяются только к его внутреннему Shadow DOM и не влияют на внешний контекст.
    • Глобальные стили из внешнего контекста не проникают внутрь компонента.

    Пример:

    import { Component, ViewEncapsulation } from '@angular/core'
@Component({
	selector: 'app-my-component',
	template: `
		<h1>Пример компонента</h1>
		<p class="my-class">Текст внутри компонента</p>
	`,
	styles: [
		`
			:host(.my-host-class) {
				background-color: yellow;
			}
			.my-class {
				color: red;
			}
		`
	],
	encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent {}

Использование режима инкапсуляции представления зависит от требований проекта. Emulated является наиболее распространенным режимом, так как обеспечивает изоляцию стилей компонента, не нарушая глобальные стили. None может использоваться в случаях, когда требуется максимальная гибкость и контроль над стилями, но может привести к конфликтам и сложностям в поддержке. ShadowDom обеспечивает наиболее строгую изоляцию и может быть полезным при создании переиспользуемых компонентов, которые должны работать независимо от внешнего контекста стилей.