custom-style: using async import fails to shim styles

[ebidel]

Using paper-styles.html (where polymer.html is a sub-import) fails to apply the styling - http://jsbin.com/fujiqixaki/edit?html,output:

<link rel="import" href="https://polygit.org/polymer/components/paper-styles/color.html" async>
<style is="custom-style">
  body {
    background: var(--paper-green-500);
  }
</style>

Interestingly, using an async polymer.html on the main page WORKS - http://jsbin.com/tuxajomelo/edit?html,output:

<link rel="import" href="https://polygit.org/polymer/components/polymer/polymer.html" async>
<style is="custom-style">
  :root {
    --paper-green-500: green;
  }
  body {
    background: var(--paper-green-500);
  }
</style>

[ebidel]

@sorvell wanted to verify these two upgrades happen for sync and non-async:

non-async case

1. color.html
2. loads polymer.html
3. upgrades custom-style in color.html
4. upgrades custom-style in main document

async case

1. async color.html
2. loads polymer
3. upgrades custom-style in main document*
4. upgrades custom-style in color.html

Results: In both cases, 3 and 4 are upgraded. Repo:

function logStuff(importDoc) {
  var importStyle = importDoc.import.querySelector('style');
  console.log('custom-style upgraded in color.html import:',
              importStyle.__isPolymerInstance__);

  var mainDocStyle = document.querySelector('style');
  console.log('custom-style upgraded in main doc:',
              mainDocStyle.__isPolymerInstance__);
}
</script>

<link rel="import" href="https://polygit.org/polymer/components/paper-styles/color.html"
      async onload="logStuff(this)">

<style is="custom-style">
  body {
    background: var(--paper-green-500);
    color: white;
  }
</style>

<p>Background should be green.</p>

Drop this in a page and toggle the async attr. Sync will show a green page. async will not. Note testing on a jsbin doesnt work very well. Weird timing or caching issues with it or polygit.

[ebidel]

With async, the custom-style upgrades are main doc, then import. Without it, the order is import, then main doc.

[jmcgdz]

@ebidel

I am upgrading to 1.1.3 and seeing a similar issue with elements that are created after ready(),
like select2 selects after data is returned from an ajax call.

Does that sound like the same issue?

Also, is there a programmatic way to reapply the styles?

[ebidel]

Sounds different. This is about async imports. I doubt they're using them.

select2 might not be using Polymer.dom()? For that kind of 3rd party that doesn't use Polymer's stuff, you can use scopeSubtree: #2299

[jmcgdz]

@ebidel Yep, that's the one. Confirmed. Thanks for the workaround

[ebidel]

Related: #2522 (comment)

[valdrinkoshi]

Also this one seems related: PolymerElements/iron-overlay-behavior#23

[rodrigogoncalves]

Also, is there a programmatic way to reapply the styles?

[2pha]

I came across this issue today when trying to add a splash screen following the polymer starter kit performance docs

[TimvdLippe]

I am closing this issue as it suffers from the same root problem described in #2522. Please see #2522 (comment) and #2522 (comment) for more information.