Polymer: flushCustomStyles error in IE11 (also in Chrome but intermittently)

[dtanp]

Description

Import custom-style causes error in IE11 (also in Chrome but intermittently).

import '@polymer/polymer/lib/elements/custom-style.js';

Error: Object doesn't support property or method 'flushCustomStyles' (http://127.0.0.1:8081/components/@webcomponents/shadycss/src/custom-style-interface.js:68)

This error causes unit test of component failed, although the actual tests are passed. It seems that the changes in shadycss v1.2.0 causes the issue.

custom-style-interface.js

export default class CustomStyleInterface {
  constructor() {
    /** @type {!Array<!CustomStyleProvider>} */
    this['customStyles'] = [];
    this['enqueued'] = false;
+    // NOTE(dfreedm): use quotes here to prevent closure inlining to `function(){}`;
+    documentWait(() => {window['ShadyCSS']['flushCustomStyles']()})
  }

Steps to Reproduce

• Create test-element component with below implementation.
• Try use this component in e.g. index.html and run in IE.
• Component is working fine but there is an error in the console.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/polymer/lib/elements/custom-style.js';

export class TestElement extends PolymerElement {

  constructor () {
    super();
  }

  static get is () {
    return 'test-element';
  }

  static get template () {
    return html`
    <style>
    :host {
      display: block;
    }
    </style>
    Hello!
    <slot></slot>
    `;
  }

  static get properties () {
    return {};
  }

}

window.customElements.define(TestElement.is, TestElement);

Expected Results

No error.

Actual Results

Error is thrown.

Error: Object doesn't support property or method 'flushCustomStyles' (http://127.0.0.1:8081/components/@webcomponents/shadycss/src/custom-style-interface.js:68)

Browsers Affected

• [x] IE 11
• [ ] Chrome (Intermittent)

Versions

• Polymer: v3.0.0-pre.13
• webcomponents: v1.2.0
• shadycss: v1.2.0-0

[web-padawan]

@azakus so it appears that shadycss should have been released as 2.0.0 since there was a breaking change not only for Polymer 3 but also for Polymer 2.0.0 as well.

As of now, the shadycss 1.2.0 is only working with webcomponentsjs 2.0.0 for P3
And for Polymer 2, we can see this error appearing, although most of tests still pass.

So, for now we have to pin shadycss version for Polymer 2 like this:

"shadycss": "webcomponents/shadycss#~1.1.0",

[dtanp]

The problem is gone if I use latest webcomponentsjs (v2) + latest shadycss (v1.2).

It seems that latest wct-browser-legacy (0.0.1-pre.12) should update its dependency to the webcomponentsjs v2 instead of v1?

[dfreedm]

@web-padawan this is more of an oversight than a breaking change in ShadyCSS. Webcomponentsjs v1 does not have that API built in yet, so I'll make a ShadyCSS v1.2.1 that makes the call conditional.

[dfreedm]

Fixed in shadycss v1.2.1

[TimvdLippe]

Awesome. Thanks @azakus for the quick turnaround!