Overriding internal/author defined styles fails in older Chrome

[robCam]

Scenario

Using <template>, as a placeholder for declaring the structure of an autonomous custom element, that includes author defined styling hooks (i.e. CSS custom properties).

Example:

<template> using var() with defined fallback values:

<template id="my-element-template">
    <style>
        :host {
            /* Fallback to 80px if --my-element-width is not defined */
            width: var(--my-element-width, 80px);
            ...
        }
        .quux {
            /* Fallback to red if --my-element-bgcolor is not defined */
            background: var(--my-element-bgcolor, red);
            ...
        }
    </style>
    <div class="quux"></div>
</template>

Issue:

Overriding the internal/author defined styles of the custom element (i.e. those defined in its shadow DOM), with user defined styles do not get applied in an older version of Chrome, namely Chrome version 49.0.2623.112 (64-bit).

Example:

Overriding the fallback values of <my-element> with user defined styles via an external stylesheet:

/* main.css */
my-element {
    --my-element-width: 160px;
    --my-element-bgcolor: blue;
}

Expected Result:

Given the example gists provided, and overriding the fallback values of <my-element>:

1. The width of host element, <my-element>, to be 160 pixels wide.
2. The background color of <div class="quux"> defined in the shadow tree to be blue.

Actual Result:

❌ Chrome version 49.0.2623.112 (64-bit):

• The width of host element <my-element> remains incorrect at 80 pixels wide.
• The background of <div class="quux"> is incorrectly colored red.
• Or intermittently, when defining multiple <my-element> tags:
  • The first <my-element> is colored blue and remains at 80px wide (i.e. only the property of the shadow tree element with a classname of quux is overridden).
  • The other instances of <my-element> are colored red and remain at 80px wide (i.e. no properties are overridden ).

✅ Older Firefox version 48.0.2 results as expected.

(Note: The only polyfill being used by the following two clients is custom-elements-es5-adapter.js as the source code is being transpiled from ES6 to ES5 using Babel).

✅ Latest mobile Safari/602.1 on iOS 10.3.2 results as expected.

✅ Latest desktop Safari v10.1.1 (12603.2.4) results as expected.

Reduced test case

A reduced test case, including the expected result and actual result, can be found here

Additional notes:

• This may be analogous to #20, #77
• For non-supporting browsers the following pollyfills are utilized:
  • shadydom.min.js
  • scoping-shim.min.js
  • custom-elements.min.js

[nazar-pc]

TL;DR: https://github.com/webcomponents/webcomponentsjs#browser-support

Chrome 49 was released more than a year ago and even next version after it was also released more than a year ago. If you didn't manage to update your browser in a year (which happens automatically by default) then it is your fault, maintainers of this project shouldn't waste time on fixing issues that are far beyond the scope of officially supported browsers.

If the issue persists in current latest version of Chrome, then update issue description, please.

[TimvdLippe]

@nazar-pc is correct, we support the latest version of Chrome. As the browser should auto-update, this problem solve itself over time.