fix(compiler): make sure selectors inside container queries are corre…

…ctly handled

improve the emulated shadowDom implementation so that it can correctly
scope selectors present inside the @container at-rule (recently added
to the css specs)

resolves #48264

packages/compiler/src/shadow_css.ts

@@ -571,7 +571,8 @@ 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('@layer')) {
+          rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
+          rule.selector.startsWith('@container')) {
         content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
       } else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
         content = this._stripScopingSelectors(rule.content);

packages/compiler/test/shadow_css/conatiner_queries_spec.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ShadowCss} from '@angular/compiler/src/shadow_css';
+
+describe('ShadowCss, container queries', () => {
+  function s(css: string, contentAttr: string, hostAttr: string = '') {
+    const shadowCss = new ShadowCss();
+    return shadowCss.shimCssText(css, contentAttr, hostAttr);
+  }
+
+  it('should scope normal selectors inside an unnamed container rules', () => {
+    const css = `
+          @container max(max-width: 500px) {
+            .item {
+              color: red;
+            }
+          }
+          `;
+    const result = s(css, 'host-a');
+    expect(result).toContain('.item[host-a] {');
+  });
+
+  it('should scope normal selectors inside a named container rules', () => {
+    const css = `
+          @container container max(max-width: 500px) {
+            .item {
+              color: red;
+            }
+          }
+          `;
+    const result = s(css, 'host-a');
+    expect(result).toContain('.item[host-a] {');
+  });
+});