Don't @import Styles in Polymer

I have not enjoyed trying to theme these Polymers. Not one bit.

This mostly seems like an exercise of carefully working through each browser, being sure to clear the cache in each, finding out what weird thing is happening in just one of them, making a small change and repeating the entire exercise. I have tended to slam at this for hours so I inevitably forget to clear the cache in one of them or forget that I've already tried a solution. But in the end, I think I have a solution for styling Polymers—without non-standard cat and hat selectors and without unsupported shadow DOM selectors.

Except it breaks Chrome, of all things. Well, not breaks so much as leave it feeling empty. Firefox and Internet Explorer both render my crazy theme customizations:



But when I load the same thing in Chrome, I get:



Empty. A whole lotta empty.

But, if I move the mouse or switch windows, Chrome realizes that it needs to update, so it draws:



That's still not right and I, in the place of an actual human trying to use a site, had to take some action to get the page to render.

To get the correct styles applied, I actually have to resize the window after which I finally get:



Now, mind you, I am several hours into getting this to work in every other platform and am loathe to dump the solution entirely. Happily I do not have to. Instead of @import-ing external styles into my Polymers, I can simply link them:

    Polymer('pricing-plan', {
      // ...
      enteredView: function() {
          // ...
          // This was not working in Chrome: 
          // var ss = document.createElement("style");
          // ss.textContent = "@import '" + css + "';";
          // this.shadowRoot.appendChild(ss);

          var link = document.createElement("link");
          link.type = "text/css";
          link.rel = "stylesheet";
          link.href = css;
          this.shadowRoot.appendChild(link);
          // ...
        }
      }
    });

I would swear that there was a reason for using @import instead of my usual <link>, but whatever that reason was it must have been me programming by coincidence. With the <link> tag back in place, I have my Polymer styled—shadow DOM and projected content—in all browsers. More importantly, I can finally finish off that chapter in Patterns in Polymer.

Day #1,024

‹prev | My Chain | next›