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]); }