Polymer: Feature request: API to load external styles imperatively

[zerodevx]

Hello. I'm not sure if there's an existing API for this. The task is to selectively load external stylesheets during runtime; the use case is to allow setting a custom element's theme declaratively (among some others I can think of).

For example, I can do

<x-test theme="super-cool-theme"></x-test>

<x-test> can then selectively load the styles (among 100's of theme selections) to apply.

Currently the pattern for loading external styles uses style-modules. However, one cannot simply do a .importHref("my-styles.html"), create a <style include="my-styles"> node and push it into local DOM.

Jsbin: http://jsbin.com/gemitewumi/edit?html,output

So I was wondering is this a bug, a feature that could be added, or there's a better way to handle this?

Thanks so much.

[zoechi]

Your example works if you enable shadow DOM. Looks like a dup of #2681

[zoechi]

Forgot to mention that you need to create a <style is="custom-style">.
I used var el = document.createElement("style", "custom-style"); in your example.

[zerodevx]

@zoechi thanks for the shout-out. AFAIK, custom-style should be used only in the main doc (index.html), not at the element-level - that's to ensure Polymer shims what's wrapped inside the <style> tag when it's _not_ inside a Polymer element; and therefore will be a good place to put global scope mixin definitions.

My jsbin doesn't work (under both shadow and shady) because the shimming is done during element registration time.

There are possible workarounds:

1. Ajax load external themes in custom mixins format, wrap them in <style is="custom-style"> and imperatively append them into the main doc scope;
2. or Ajax load, add them into this.customStyle and call this.updateStyles();

but both approaches feel clunky. Since include="my-style-module" is introduced, I thought it'll be nicer to make use of it even during runtime. Perhaps we can use this issue to propose this feature (and hopefully gain traction) since it's clear to the project owners exactly what we're hoping for.

Thanks so much for your input!
J

[zoechi]

custom-style should be used only in the main doc (index.html), not at the element-level

That might be, but for me using <style is="custom-style" include="some-theme"> to add styles dynamically to elements, was the only way I could make work what I needed and it works fine so far.