diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index 224c8293d30..9c793c2a358 100644
--- a/packages/compiler/src/shadow_css.ts
+++ b/packages/compiler/src/shadow_css.ts
@@ -370,7 +370,7 @@ export class ShadowCss {
             this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
       } else if (
           rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
-          rule.selector.startsWith('@document')) {
+          rule.selector.startsWith('@document') || rule.selector.startsWith('@layer')) {
         content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
       } else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
         content = this._stripScopingSelectors(rule.content);
diff --git a/packages/compiler/test/shadow_css_spec.ts b/packages/compiler/test/shadow_css_spec.ts
index 574815ec5c3..90f50d876e3 100644
--- a/packages/compiler/test/shadow_css_spec.ts
+++ b/packages/compiler/test/shadow_css_spec.ts
@@ -120,6 +120,12 @@ import {normalizeCSS} from '@angular/platform-browser/testing/src/browser_util';
       expect(s(css, 'contenta')).toEqual(expected);
     });
 
+    it('should handle layer rules', () => {
+      const css = '@layer utilities {section {display: flex;}}';
+      const expected = '@layer utilities {section[contenta] {display:flex;}}';
+      expect(s(css, 'contenta')).toEqual(expected);
+    });
+
     // Check that the browser supports unprefixed CSS animation
     it('should handle keyframes rules', () => {
       const css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';