More efficient fix for #3661. Re-uses cached style element that needs…

… to be replaced in the document rather than creating a new one.

src/lib/style-properties.html

@@ -400,18 +400,30 @@
         }
         // apply styling always under native or if we generated style
         // or the cached style is not in document(!)
-        if (nativeShadow || (!style || !style.parentNode)) {
+        if (nativeShadow) {
           // update existing style only under native
-          if (nativeShadow && element._customStyle) {
+          if (element._customStyle) {
             element._customStyle.textContent = cssText;
             style = element._customStyle;
           // otherwise, if we have css to apply, do so
           } else if (cssText) {
             // apply css after the scope style of the element to help with
             // style precedence rules.
-            style = styleUtil.applyCss(cssText, selector,
-              nativeShadow ? element.root : null, element._scopeStyle);
+            style = styleUtil.applyCss(cssText, selector, element.root, 
+              element._scopeStyle);
           }
+        } else {
+          // shady and no cache hit
+          if (!style) {
+            // apply css after the scope style of the element to help with
+            // style precedence rules.
+            style = styleUtil.applyCss(cssText, selector, null,
+              element._scopeStyle);
+          // shady and cache hit but not in document
+          } else if (!style.parentNode) {
+            styleUtil.applyStyle(style, null, element._scopeStyle);
+          }
+
         }
         // ensure this style is our custom style and increment its use count.
         if (style) {
@@ -424,7 +436,7 @@
         }
         return style;
       },
-
+      
       // customStyle properties are applied if they are truthy or 0. Otherwise,
       // they are skipped; this allows properties previously set in customStyle
       // to be easily reset to inherited values.

src/lib/style-util.html

@@ -79,6 +79,10 @@
       // add a string of cssText to the document.
       applyCss: function(cssText, moniker, target, contextNode) {
         var style = this.createScopeStyle(cssText, moniker);
+        return this.applyStyle(style, target, contextNode);
+      },
+
+      applyStyle: function(style, target, contextNode) {
         target = target || document.head;
         var after = (contextNode && contextNode.nextSibling) || 
           target.firstChild;

src/standard/x-styling.html

@@ -187,15 +187,6 @@
           this._styleProperties, this._scopeSelector, info && info.style);
         // apply scope selector
         if (!nativeShadow) {
-          // update cached style to point to new style.
-          // TODO(sorvell): under ShadyDOM, the cached style is 
-          // used to style the element and the cache must be updated to point
-          // to the 'active' style so elements can determine if updates are needed.
-          // This is not the case under Shadow DOM. Ideally the cache 
-          // would be decoupled from style application/use.
-          if (info) {
-            info.style = style;
-          }
           propertyUtils.applyElementScopeSelector(this, this._scopeSelector,
             oldScopeSelector, this._scopeCssViaAttr);
         }

test/unit/custom-style.html

@@ -250,7 +250,7 @@
         child-of-child-with-var {
           /* in certain browsers (e.g. Safari) `top`, `bottom`, `left`, `right` don't compute
              when no explicit position is defined (`relative` / `absolute` / `fixed`) */
-          position: relative;
+          position: absolute;
           --variable-own-line: "Varela font";
           margin-top: var(--variable-property-own-line);
           margin-bottom: var(--variable-property-preceded-property);
@@ -259,6 +259,7 @@
           --variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment);
           padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px;
           top: 12px;--variable-from-other-variable: var(--variable-into-first-variable);--variable-from-another-variable: var(--variable-into-second-variable); --variable-from-last-variable: var(--variable-into-third-variable);
+          height: 20px;
         }
       </style>
       <child-of-child-with-var id="child"></child-of-child-with-var>