Merge pull request #4223 from albertgasset/MOBILE-4616-database

MOBILE-4616 database: Fix specificity of custom CSS rules
moodlehq · Oct 23, 2024 · ae984d3 · ae984d3
2 parents 748559c + ab18e51
commit ae984d3
Showing 1 changed file with 9 additions and 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
@@ -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])',
+        );
     }
 
     /**