javascript / expert
Snippet
View-State kapseln mit ViewEncapsulation.ShadowDom
Die ShadowDom-Kapselung hängt eine echte Shadow-DOM-Wurzel an das Host-Element und liefert eine vom Browser erzwungene echte Stilisolation statt Angulars standardmäßiger attributbasierter Simulation mit _ngcontent-Selektoren. Das ist relevant, wenn die Komponente in eine Host-Seite mit unbekanntem, potenziell kollidierendem globalen CSS eingebettet wird, da die Shadow-DOM-Grenze verhindert, dass äußere Styles eindringen und umgekehrt. Der Kompromiss ist, dass globale Styles wie Bootstrap-Resets innen nicht mehr gelten, während CSS Custom Properties wie --badge-color die Grenze bewusst durchdringen und damit den zulässigen Kanal für externes Theming bilden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component, ViewEncapsulation } from '@angular/core';@Component({selector: 'app-widget-embed',standalone: true,encapsulation: ViewEncapsulation.ShadowDom,styles: [`:host {display: block;contain: content;}.badge {font-family: system-ui;color: var(--badge-color, #333);}`],template: `<span class="badge"><ng-content></ng-content></span>`,})export class WidgetEmbedComponent {}
angular
Erklärung
1
encapsulation: ViewEncapsulation.ShadowDom,
Wechselt von Angulars emulierter Kapselung zu einer nativen Browser-Shadow-DOM-Wurzel, die am Host-Element hängt.
2
contain: content;
Der CSS-Containment-Hinweis teilt dem Browser mit, dass Layout, Paint und Style dieses Teilbaums isoliert sind, wodurch Neuberechnungen außerhalb der Grenze entfallen.
3
color: var(--badge-color, #333);
Custom Properties sind der einzige Styling-Kanal, der Shadow-Grenzen durchdringt, sodass die Host-Seite dieses Element gezielt themen kann.