-
Notifications
You must be signed in to change notification settings - Fork 11.9k
Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
This should work out of the box as ViewEncapsulation.ShadowDOM is a built-in feature of Angular and this package cannot be said to be complete without supporting it.
Another option could be to add a warning to ViewEncapsulation.ShadowDOM that it's not feature complete for SSR.
Since 2015 there's been a wide support for declarative shadow DOM in all browsers and similar features have been implemented in other SSR libraries.
Minimal Reproduction
@Component({ selector: 'app-shadow-root', standalone: true, template: '<h2>This should be RED</h2>', encapsulation: ViewEncapsulation.ShadowDom, styles: 'h2 { color: red }', }) export class ShadowRootComponent {} @Component({ selector: 'app-root', standalone: true, template: '<h2>This should not be RED</h2><app-shadow-root></app-shadow-root>', imports: [ShadowRootComponent] }) export class AppComponent {}
SSR produces
<!DOCTYPE html> <html lang="en" data-critters-container> <head> <meta charset="utf-8"> <title>test</title> <base href="/"> <style ng-app-id="ng"> h2 { color: red; }/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNoYWRvdy1yb290LmNvbXBvbmVudC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsVUFBQTtBQUNGIiwiZmlsZSI6InNoYWRvdy1yb290LmNvbXBvbmVudC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaDIge1xuICBjb2xvcjogcmVkO1xufVxuIl19 *//*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3Byb2plY3RzL2RlbW8vc3JjL2FwcC9zaGFkb3ctcm9vdC5jb21wb25lbnQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFVBQUE7QUFDRjtBQUNBLG9TQUFvUyIsInNvdXJjZXNDb250ZW50IjpbImgyIHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0= */ </style> </head> <body> <app-root _nghost-ng-c1687021183 ng-version="17.3.8" ng-server-context="ssr"> <h2 _ngcontent-ng-c1687021183>This should not be RED</h2> <app-shadow-root _ngcontent-ng-c1687021183 _nghost-ng-c1132927781> <h2 _ngcontent-ng-c1132927781>This should be RED</h2> </app-shadow-root> </app-root> <script src="runtime.js" type="module"></script> <script src="polyfills.js" type="module"></script> <script src="vendor.js" type="module"></script> <script src="main.js" type="module"></script> </body> </html>
Exception or Error
SSR doesn't use declarative shadowDOM for ViewEncapsulation.ShadowDom
As you can see, the Shadow DOM component's HTML was rendered as if encapsulation was emulated, but the respective CSS was added to the head "as is" and consequently was applied incorrectly.
Your Environment
> ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △しろさんかく \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.1.6
Node: 22.18.0
Package Manager: npm 11.0.0
OS: win32 x64
Angular: 20.1.7
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.2001.6
@angular-devkit/build-angular 20.1.6
@angular-devkit/core 20.1.6
@angular-devkit/schematics 20.1.6
@angular/build 20.1.6
@angular/cli 20.1.6
@angular/ssr 20.1.6
@schematics/angular 20.1.6
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1
Anything else relevant?
Related Angular bug angular/angular#48746
MDN on declarative shadowDom with examples https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template