I have a custom element that has two categories of styles, static and
dynamic. The static styles exist in the module
<dom-module><style>...</style></dom-module> but the dynamic styles need to
live in their own stylesheets and then get loaded if necessary.
I know I can apply styles to the local DOM with a few methods like this:
ready: function() {
this.determineClientStyle('some value returned by another function');
},
determineClientStyle: function(client) {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/elements/'+client+'/dynamic_style_1.css';
var beforeNode = Polymer.dom(this.root).childNodes[0];
Polymer.dom(this.root).insertBefore(link, beforeNode);
},
However, this obviously doesn't work when the CSS is written to apply in
the shadow DOM and putting it in the local DOM causes it to leak to other
elements. I haven't been able to find a recent solution. I found a few
explanations that use element.shadowRoot but so far I haven't been able to
get this to work.
Whats the best way to apply additional styles to the Shadow DOM after
receiving the necessary client identifier from another part of my app...so
likely on ready.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/229bd939-e0f6-442f-af24-56b69792bfe4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
