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.

[zerodevx]

Hmm... not sure why either...

In any case, I hope the imperative loading of styles is a feature that more
people will find useful (instead of just both of us) so that this gets
under the Polymer devs' radar!

Thanks again.

On Tue, Dec 8, 2015 at 6:23 PM, Günter Zöchbauer notifications@github.com
wrote:

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.

—
Reply to this email directly or view it on GitHub
#3123 (comment).

[pwrinc]

Me too would like to have such a feature in future releases...

[jtrs]

This feature would be useful for us too,

[hrbu]

+1

[kevinSuttle]

@zerodevx There is a related snippet in the Polymer styling docs, though it is specific to "local" DOM.

<script>
    Polymer({
      is: 'x-custom',
      changeTheme: function() {
        this.customStyle['--my-toolbar-color'] = 'blue';
        this.updateStyles();
      }
    });
  </script>

[zoechi]

@kevinSuttle that isn't loading external styles.

[cunhaalx]

+1

[jeffkevin]

+1

[ebidel]

Moving to 2.0 since shadow dom v1 supports stylesheets. We should support this.

[newlukai]

+1

[kevinpschaaf]

This is really a shadycss issue. Currently the shadycss polyfill only supports scoping styles prototypically for an element (e.g., for all instances of a given element type). This is a performance optimization because the ability to scope individual instances as you would need to do to support imperatively appending stylesheets to shadowRoots is significantly a.) more complex and b.) would be very hard to make performant.

This shadycss issue covers the gap in the polyfill, and we'd consider this issue blocked on resolution of that. Please see the discussion here: webcomponents/shadycss#19

[kevinSuttle]

I hate to say it, but could this be made to be performant if there was virtual CSSOM diffing in memory?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!