angular
diff --git a/‎packages/compiler/src/shadow_css.ts
Lines changed: 12 additions & 51 deletions b/‎packages/compiler/src/shadow_css.ts
Lines changed: 12 additions & 51 deletions
@@ -27,9 +27,8 @@ const animationKeywords = new Set([
 ]);
 
 /**
- * The following class is a port of shadowCSS from webcomponents.js to TypeScript.
- *
- * Please make sure to keep to edits in sync with the source file.
+ * The following class has its origin from a port of shadowCSS from webcomponents.js to TypeScript.
+ * It has since diverge in many ways to tailor Angular's needs.
  *
  * Source:
  * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
@@ -70,28 +69,8 @@ const animationKeywords = new Set([
     }
 
   * encapsulation: Styles defined within ShadowDOM, apply only to
-  dom inside the ShadowDOM. Polymer uses one of two techniques to implement
-  this feature.
-
-  By default, rules are prefixed with the host element tag name
-  as a descendant selector. This ensures styling does not leak out of the 'top'
-  of the element's ShadowDOM. For example,
-
-  div {
-      font-weight: bold;
-    }
-
-  becomes:
-
-  x-foo div {
-      font-weight: bold;
-    }
-
-  becomes:
-
-
-  Alternatively, if WebComponents.ShadowCSS.strictStyling is set to true then
-  selectors are scoped by adding an attribute selector suffix to each
+  dom inside the ShadowDOM.
+  The selectors are scoped by adding an attribute selector suffix to each
   simple selector that contains the host element tag name. Each element
   in the element's ShadowDOM template is also given the scope attribute.
   Thus, these rules match only elements that have the scope attribute.
@@ -152,16 +131,11 @@ const animationKeywords = new Set([
   in comments in lieu of the next selector when running under polyfill.
 */
 export class ShadowCss {
-  // TODO: Is never re-assigned, could be removed.
-  strictStyling: boolean = true;
-
   /*
-   * Shim some cssText with the given selector. Returns cssText that can
-   * be included in the document via WebComponents.ShadowCSS.addCssToDocument(css).
+   * Shim some cssText with the given selector. Returns cssText that can be included in the document
    *
-   * When strictStyling is true:
-   * - selector is the attribute added to all elements inside the host,
-   * - hostSelector is the attribute added to the host itself.
+   * The selector is the attribute added to all elements inside the host,
+   * The hostSelector is the attribute added to the host itself.
    */
   shimCssText(cssText: string, selector: string, hostSelector: string = ''): string {
     const commentsWithHash = extractCommentsWithHash(cssText);
@@ -373,7 +347,6 @@ export class ShadowCss {
    *
    **/
   private _insertPolyfillDirectivesInCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
     return cssText.replace(_cssContentNextSelectorRe, function(...m: string[]) {
       return m[2] + '{';
     });
@@ -395,7 +368,6 @@ export class ShadowCss {
    *
    **/
   private _insertPolyfillRulesInCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
     return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
       const rule = m[0].replace(m[1], '').replace(m[2], '');
       return m[4] + rule;
@@ -441,7 +413,6 @@ export class ShadowCss {
    *
    **/
   private _extractUnscopedRulesFromCssText(cssText: string): string {
-    // Difference with webcomponents.js: does not handle comments
     let r = '';
     let m: RegExpExecArray|null;
     _cssContentUnscopedRuleRe.lastIndex = 0;
@@ -568,8 +539,7 @@ export class ShadowCss {
       let selector = rule.selector;
       let content = rule.content;
       if (rule.selector[0] !== '@') {
-        selector =
-            this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
+        selector = this._scopeSelector(rule.selector, scopeSelector, hostSelector);
       } else if (
           rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
           rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
@@ -611,17 +581,14 @@ export class ShadowCss {
     });
   }
 
-  private _scopeSelector(
-      selector: string, scopeSelector: string, hostSelector: string, strict: boolean): string {
+  private _scopeSelector(selector: string, scopeSelector: string, hostSelector: string): string {
     return selector.split(',')
         .map(part => part.trim().split(_shadowDeepSelectors))
         .map((deepParts) => {
           const [shallowPart, ...otherParts] = deepParts;
           const applyScope = (shallowPart: string) => {
             if (this._selectorNeedsScoping(shallowPart, scopeSelector)) {
-              return strict ?
-                  this._applyStrictSelectorScope(shallowPart, scopeSelector, hostSelector) :
-                  this._applySelectorScope(shallowPart, scopeSelector, hostSelector);
+              return this._applySelectorScope(shallowPart, scopeSelector, hostSelector);
             } else {
               return shallowPart;
             }
@@ -643,19 +610,13 @@ export class ShadowCss {
     return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
   }
 
-  private _applySelectorScope(selector: string, scopeSelector: string, hostSelector: string):
-      string {
-    // Difference from webcomponents.js: scopeSelector could not be an array
-    return this._applySimpleSelectorScope(selector, scopeSelector, hostSelector);
-  }
-
   // scope via name and [is=name]
   private _applySimpleSelectorScope(selector: string, scopeSelector: string, hostSelector: string):
       string {
     // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
     _polyfillHostRe.lastIndex = 0;
     if (_polyfillHostRe.test(selector)) {
-      const replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector;
+      const replaceBy = `[${hostSelector}]`;
       return selector
           .replace(
               _polyfillHostNoCombinatorRe,
@@ -674,7 +635,7 @@ export class ShadowCss {
 
   // return a selector with [name] suffix on each simple selector
   // e.g. .foo.bar > .zot becomes .foo[name].bar[name] > .zot[name]  /** @internal */
-  private _applyStrictSelectorScope(selector: string, scopeSelector: string, hostSelector: string):
+  private _applySelectorScope(selector: string, scopeSelector: string, hostSelector: string):
       string {
     const isRe = /\[is=([^\]]*)\]/g;
     scopeSelector = scopeSelector.replace(isRe, (_: string, ...parts: string[]) => parts[0]);