diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index 93c174b5e6b8..5c84157cad25 100644
--- a/packages/compiler/src/shadow_css.ts
+++ b/packages/compiler/src/shadow_css.ts
@@ -1081,7 +1081,7 @@ const nthRegex = new RegExp(String.raw`(:nth-[-\w]+)` + _parenSuffix, 'g');
 const _cssColonHostRe = new RegExp(_polyfillHost + _parenSuffix + '?([^,{]*)', 'gim');
 // note: :host-context patterns are terminated with `{`, as opposed to :host which
 // is both `{` and `,` because :host-context handles top-level commas differently.
-const _hostContextPattern = _polyfillHostContext + _parenSuffix + '?([^{]*)';
+const _hostContextPattern = _polyfillHostContext + _parenSuffix + '([^{]*)';
 const _cssColonHostContextReGlobal = new RegExp(
   `${_cssScopedPseudoFunctionPrefix}(${_hostContextPattern})`,
   'gim',
@@ -1106,8 +1106,8 @@ const _shadowDOMSelectorsRe = [
 const _shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)|(?:::ng-deep)/g;
 const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
 const _polyfillHostRe = /-shadowcsshost/gim;
-const _colonHostRe = /:host/gim;
-const _colonHostContextRe = /:host-context/gim;
+const _colonHostRe = /:host(?!\-context)/gim;
+const _colonHostContextRe = /:host-context(?=\(\s*[^)\s])/gim;
 
 const _newLinesRe = /\r?\n/g;
 const _commentRe = /\/\*[\s\S]*?\*\//g;
diff --git a/packages/compiler/test/shadow_css/host_and_host_context_spec.ts b/packages/compiler/test/shadow_css/host_and_host_context_spec.ts
index db7c473d7713..56d98018dd53 100644
--- a/packages/compiler/test/shadow_css/host_and_host_context_spec.ts
+++ b/packages/compiler/test/shadow_css/host_and_host_context_spec.ts
@@ -262,18 +262,17 @@ describe('ShadowCss, :host and :host-context', () => {
       );
     });
 
-    // It is not clear what the behavior should be for a `:host-context` with no selectors.
     // This test is checking that the result is backward compatible with previous behavior.
     // Arguably it should actually be an error that should be reported.
     it('should handle :host-context with no ancestor selectors', () => {
       expect(shim(':host-context .inner {}', 'contenta', 'a-host')).toEqualCss(
-        '[a-host] .inner[contenta] {}',
+        '[contenta]:host-context .inner[contenta] {}',
       );
       expect(shim(':host-context() .inner {}', 'contenta', 'a-host')).toEqualCss(
-        '[a-host] .inner[contenta] {}',
+        '[contenta]:host-context() .inner[contenta] {}',
       );
       expect(shim(':host-context :host-context(.a) {}', 'contenta', 'host-a')).toEqualCss(
-        '.a[host-a], .a [host-a] {}',
+        ':host-context .a[host-a], .a [host-a] {}',
       );
     });