// Example of using ViewEncapsulation in a component
@Component({
selector: 'app-example',
template: '<p class="red-text">This text is styled.</p>',
styles: ['.red-text { color: red; }'],
encapsulation: ViewEncapsulation.Emulated
})
export class ExampleComponent {}
// Example of using Emulated ViewEncapsulation
@Component({
selector: 'app-emulated',
template: '<p class="blue-text">This text is styled.</p>',
styles: ['.blue-text { color: blue; }'],
encapsulation: ViewEncapsulation.Emulated
})
export class EmulatedComponent {}
// Example of using None ViewEncapsulation
@Component({
selector: 'app-none',
template: '<p class="green-text">This text is styled.</p>',
styles: ['.green-text { color: green; }'],
encapsulation: ViewEncapsulation.None
})
export class NoneComponent {}
// Example of using ShadowDom ViewEncapsulation
@Component({
selector: 'app-shadow-dom',
template: '<p class="purple-text">This text is styled.</p>',
styles: ['.purple-text { color: purple; }'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowDomComponent {}