Appending to Custom Element's Shadow DOM (polymer 1.0)

[aaron...@gmail.com]

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.

[Max]

Firstly, are you using shadow dom or the (default) shady dom? I guess the latter - iinm, with shady dom (and with the polyfill on Polymer 0.5) the css actually ends up in the main html head (after some modification to make it specific to the element it is declared in and other stuff). So, it's plausible that you could add it in the main html head after prepending the element name manually to each rule; but that probably isn't a good idea since it'll break when Polymer stops using the polyfill by default (ie when the features are supported cross-browser ... who knows when that will be). However, it might be worth trying as a debug step or as a matter of interest or something like that.

I think the real solution is probably to use this.updateStyles() after loading the style as described below - I don't see you mentioning that, so I'm not sure if you have tried it or not :

<https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api>

I'm not sure if that would work or not, but it's worth a try. You might also try to load the stylesheet by ajax and create a <style> element instead of a <link> element, and then append that to your element - I think I tried something like this in Polymer 0.5 (to get around the deprecation of /deep/ and ::shadow in stylesheets), and seem to recall it working ok...ah, found it, yeah, this is what I ended up with :

  var theGraphStyle = document.createElement('style');

  theGraphStyle.textContent = '@import "css/slv-the-graph.css";';

  editor.$.editor.$.graph.shadowRoot.appendChild(theGraphStyle);

(You'll probably want to replace 'editor.$.editor.$graph' with simply this.shadowRoot). But, remember, that was with Polymer 0.5, and I'm a bit 'green' with 1.0, so YMMV, but at least some things to try.

HTH.

Max.

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 polymer-dev...@googlegroups.com.
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.