Lazy-loaded <style is="custom-style"> should trigger Polymer.updateStyles

[kevinpschaaf]

Description

Lazy-loaded <style is="custom-style"> should trigger global updateStyles. If you currently async load an import that contains a top-level custom-style (or more likely, an element that depends on a custom-style, such as paper-card), although the custom-style gets registered and the global Polymer.StyleDefaults properties get updated, they do not cascade down the tree.

Live Demo

Works (paper-card loaded sync): http://jsbin.com/raboji/edit?html,output
Fails (paper-card loaded on demand): http://jsbin.com/ruhuqo/edit?html,output

Steps to Reproduce

See failing example above. Note, it's important to have a host element that consumes custom properties between the lazy-loaded element consuming lazy-loaded styles and the root, otherwise the custom property styles are chained lazily back up to the root and it will work.

Expected Results

Styles applied by global <style is="custom-style"> should apply after being lazy-loaded.

Actual Results

Styles applied by global <style is="custom-style"> do not apply after being lazy-loaded.

Browsers Affected

• Chrome

Versions

• Polymer: v1.5.0
• webcomponents: n/a

[milesje]

This also affects the use iron-flex and iron-flex-alignment within an element that is being lazy-loaded.

<dom-module id="my-element">
    <template>
        <style include="iron-flex iron-flex-alignment">
            :host {
                display: block;
            }

[FredKSchott]

For exposure, we've recently seen bugs reported on this underlying behavior in the polymer-cli & app-drawer-template repos