diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
index 709b8993df..64710082ab 100644
--- a/src/lib/style-properties.html
+++ b/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.
diff --git a/src/lib/style-util.html b/src/lib/style-util.html
index 16dc0c7fbe..368aec98e7 100644
--- a/src/lib/style-util.html
+++ b/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;
diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 211565ec09..23150ed4f8 100644
--- a/src/standard/x-styling.html
+++ b/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);
}
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index d04c73403c..ce0a060bf6 100644
--- a/test/unit/custom-style.html
+++ b/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;
}