fix(ShadowCss): support `[attr="value with space"]`

fixes #6249

modules/@angular/compiler/src/shadow_css.ts

@@ -417,21 +417,35 @@ export class ShadowCss {
       return scopedP;
     };
 
-    const sep = /( |>|\+|~(?!=))\s*/g;
+    const sep = /( |>|\+|~(?!=)|\[|\])\s*/g;
     const scopeAfter = selector.indexOf(_polyfillHostNoCombinator);
 
     let scoped = '';
     let startIndex = 0;
     let res: RegExpExecArray;
+    let inAttributeSelector: boolean = false;
 
     while ((res = sep.exec(selector)) !== null) {
       const separator = res[1];
+      if (separator === '[') {
+        inAttributeSelector = true;
+        scoped += selector.slice(startIndex, res.index).trim() + '[';
+        startIndex = sep.lastIndex;
+      }
+      if (!inAttributeSelector) {
         const part = selector.slice(startIndex, res.index).trim();
         // if a selector appears before :host-context it should not be shimmed as it
         // matches on ancestor elements and not on elements in the host's shadow
         const scopedPart = startIndex >= scopeAfter ? _scopeSelectorPart(part) : part;
         scoped += `${scopedPart} ${separator} `;
         startIndex = sep.lastIndex;
+      } else if (separator === ']') {
+        const part = selector.slice(startIndex, res.index).trim() + ']';
+        const scopedPart = startIndex >= scopeAfter ? _scopeSelectorPart(part) : part;
+        scoped += `${scopedPart} `;
+        startIndex = sep.lastIndex;
+        inAttributeSelector = false;
+      }
     }
     return scoped + _scopeSelectorPart(selector.substring(startIndex));
   }

modules/@angular/compiler/test/shadow_css_spec.ts

@@ -91,6 +91,7 @@ export function main() {
       expect(s('one[attr*="value"] {}', 'a')).toEqual('one[attr*="value"][a] {}');
       expect(s('one[attr|="value"] {}', 'a')).toEqual('one[attr|="value"][a] {}');
       expect(s('one[attr~="value"] {}', 'a')).toEqual('one[attr~="value"][a] {}');
+      expect(s('one[attr="va lue"] {}', 'a')).toEqual('one[attr="va lue"][a] {}');
       expect(s('one[attr] {}', 'a')).toEqual('one[attr][a] {}');
       expect(s('[is="one"] {}', 'a')).toEqual('[is="one"][a] {}');
     });