Skip to content

Commit 63f91ae

Browse files
author
Steven Orvell
committed
More efficient fix for #3661. Re-uses cached style element that needs to be replaced in the document rather than creating a new one.
1 parent 717fc3a commit 63f91ae

4 files changed

Lines changed: 23 additions & 15 deletions

File tree

‎src/lib/style-properties.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -400,18 +400,30 @@
400400
}
401401
// apply styling always under native or if we generated style
402402
// or the cached style is not in document(!)
403-
if (nativeShadow || (!style || !style.parentNode)) {
403+
if (nativeShadow) {
404404
// update existing style only under native
405-
if (nativeShadow && element._customStyle) {
405+
if (element._customStyle) {
406406
element._customStyle.textContent = cssText;
407407
style = element._customStyle;
408408
// otherwise, if we have css to apply, do so
409409
} else if (cssText) {
410410
// apply css after the scope style of the element to help with
411411
// style precedence rules.
412-
style = styleUtil.applyCss(cssText, selector,
413-
nativeShadow ? element.root : null, element._scopeStyle);
412+
style = styleUtil.applyCss(cssText, selector, element.root,
413+
element._scopeStyle);
414414
}
415+
} else {
416+
// shady and no cache hit
417+
if (!style) {
418+
// apply css after the scope style of the element to help with
419+
// style precedence rules.
420+
style = styleUtil.applyCss(cssText, selector, null,
421+
element._scopeStyle);
422+
// shady and cache hit but not in document
423+
} else if (!style.parentNode) {
424+
styleUtil.applyStyle(style, null, element._scopeStyle);
425+
}
426+
415427
}
416428
// ensure this style is our custom style and increment its use count.
417429
if (style) {
@@ -424,7 +436,7 @@
424436
}
425437
return style;
426438
},
427-
439+
428440
// customStyle properties are applied if they are truthy or 0. Otherwise,
429441
// they are skipped; this allows properties previously set in customStyle
430442
// to be easily reset to inherited values.

‎src/lib/style-util.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@
7979
// add a string of cssText to the document.
8080
applyCss: function(cssText, moniker, target, contextNode) {
8181
var style = this.createScopeStyle(cssText, moniker);
82+
return this.applyStyle(style, target, contextNode);
83+
},
84+
85+
applyStyle: function(style, target, contextNode) {
8286
target = target || document.head;
8387
var after = (contextNode && contextNode.nextSibling) ||
8488
target.firstChild;

‎src/standard/x-styling.html‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -187,15 +187,6 @@
187187
this._styleProperties, this._scopeSelector, info && info.style);
188188
// apply scope selector
189189
if (!nativeShadow) {
190-
// update cached style to point to new style.
191-
// TODO(sorvell): under ShadyDOM, the cached style is
192-
// used to style the element and the cache must be updated to point
193-
// to the 'active' style so elements can determine if updates are needed.
194-
// This is not the case under Shadow DOM. Ideally the cache
195-
// would be decoupled from style application/use.
196-
if (info) {
197-
info.style = style;
198-
}
199190
propertyUtils.applyElementScopeSelector(this, this._scopeSelector,
200191
oldScopeSelector, this._scopeCssViaAttr);
201192
}

‎test/unit/custom-style.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@
250250
child-of-child-with-var {
251251
/* in certain browsers (e.g. Safari) `top`, `bottom`, `left`, `right` don't compute
252252
when no explicit position is defined (`relative` / `absolute` / `fixed`) */
253-
position: relative;
253+
position: absolute;
254254
--variable-own-line: "Varela font";
255255
margin-top: var(--variable-property-own-line);
256256
margin-bottom: var(--variable-property-preceded-property);
@@ -259,6 +259,7 @@
259259
--variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment);
260260
padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px;
261261
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);
262+
height: 20px;
262263
}
263264
</style>
264265
<child-of-child-with-var id="child"></child-of-child-with-var>

0 commit comments

Comments
 (0)