From 1b5878678b5ee70464bab75f5236d07a87d78d56 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 15 Mar 2022 23:30:13 +0100
Subject: [PATCH] fix(core): fix specificity ScopedStylesController

---
 packages/core/src/ScopedStylesController.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/ScopedStylesController.js b/packages/core/src/ScopedStylesController.js
index 6e9ff7790..d746263ac 100644
--- a/packages/core/src/ScopedStylesController.js
+++ b/packages/core/src/ScopedStylesController.js
@@ -35,10 +35,14 @@ export class ScopedStylesController {
   }
 
   __setupStyleTag() {
+    // Make it win from other elements on the page.
+    // TODO: consider adding an id here to always win, since we are simulating shadow dom
+    // behavior here.
+    const highSpecifictyScope = `${this.scopedClass}.${this.scopedClass}`;
     this.__styleTag.textContent = /** @type {typeof ScopedStylesController} */ (
       this.host.constructor
     )
-      .scopedStyles(unsafeCSS(this.scopedClass))
+      .scopedStyles(unsafeCSS(highSpecifictyScope))
       .toString();
     this.host.insertBefore(this.__styleTag, this.host.childNodes[0]);
   }