From ab18e51b24f7082e0fa6e5a08c0093f89beea250 Mon Sep 17 00:00:00 2001 From: Albert Gasset Date: Tue, 22 Oct 2024 16:31:29 +0200 Subject: [PATCH] MOBILE-4616 database: Fix specificity of custom CSS rules --- .../compile/components/compile-html/compile-html.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/core/features/compile/components/compile-html/compile-html.ts b/src/core/features/compile/components/compile-html/compile-html.ts index cfd3d9c4705..c55156abe1c 100644 --- a/src/core/features/compile/components/compile-html/compile-html.ts +++ b/src/core/features/compile/components/compile-html/compile-html.ts @@ -202,7 +202,15 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck { return; } - this.componentStyles = CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host'); + // Prefix all CSS rules with the host attribute and [compiled-component-id]. + // We need [compiled-component-id] to increase the specificity of the prefix to 0,2,0. + // This way rules added by the parent component using a class has the same base + // specificity and do not override the added rules. + this.componentStyles = CoreDom.prefixCSS( + this.cssCode, + ':host([compiled-component-id]) ::ng-deep', + ':host([compiled-component-id])', + ); } /**