Global CSS design and use

[Justin Merz]

Sorry if this is a repeat,  most of the Global CSS discussions I have found are quite old in comparison to the age of Polymer.  I have an app using 50+ polymer-elements and have been using the (now deprecated?) applyAuthorStyles to bleed in my apps css.  This has and continues to work when using the polyfill Shadow Dom.  Recently I have been trying to get the app working in Canary with 'Experimental Web Platform features' turned on.  The native Shadow Dom is not allowing and global css to bleed in.  I went ahead and created a single css file which I imported as <link rel="stylesheet"> inside my <template> tags so I would be doing things the Web Component way. It should be noted that about 40% of my elements are now accessing the same css file.  This worked great in Canary but tanked Polymer in Chrome 33.  Here are my results from some tests:

-Chrome 33

  Polymer as a fit, spins and spins then either Chrome dies or loads after a very intense process (guessing bug?).

-Chrome 33 vulcanized

  Works.

-Chrome Canary (35) w/ experimental platform features on

  Works

I'm interested if there is a proposed solution for global styling.  I understand the use case of wanting to encapsulate widgets but throwing out the use of global css because everything is an elements seems off to me.  I'm just using standard libraries such as bootstrap, font-awesome, animate.css and it just seems odd that I would have to import every global css file into every widget or do something like use Grunt to pre-compress my global css from Bower into a single file (which at least has me only importing one stylesheet).  Specially when you are building application specific elements that are never intended to live elsewhere.

So, this all said, what approach should I take?  Is the inclusion of a single 'app' css file the way to go in all of my elements and I should I look to file a bug for Chrome?  I am missing something about allowing global css to pass through the Shadow Dom (w/o appending a lot of ^^ to standard css libraries)?  Or another option that I am missing? 

Thanks in advance.  Love the library and all the promise it shows.

[Steve Orvell]

-Chrome 33
  Polymer as a fit, spins and spins then either Chrome dies or loads after a very intense process (guessing bug?).

That sounds like a bug and let's separate it from the design question here. It may be related to loading and/or shimming specific stylesheets to work in the polyfill. We'll be happy to investigate a test case.

I'm interested if there is a proposed solution for global styling.

Our team has been discussing this but there's not yet an accepted solution. In the native implementation duplicate style elements are optimized such that they share resources. However, style elements that load remote resources (e.g. @import, link rel) cannot be shared. There's been discussion of adding an api on shadowRoot that says, 'make a given (potentially document level) stylesheet apply here'.

 

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/46769bee-b1f2-4c42-bc47-5d1255871f72%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Justin Merz]

Thanks.  I'll try put together a sample of the badness for you to inspect.

And +1 for the 'make a given (potentially document level) stylesheet apply here' flag.

[Justin Merz]

So I have attempted to put together an example, wasn't sure how to do it w/ jsbin.  Here is a simple node server that will create a tree of n depth with x number of elements at each depth (so you can modify app size).  Finally there is a flag to include stylesheets into each node or not.  Note the load difference between including a stylesheet and not including.  base.css has bootstrap, font-awesome, animate.css included in it.

https://github.com/jrmerz/polymer-stylesheet-loading

Flags are in mkele.js:

// how deep the element tree should be

var depth = 3; 

// how many elements at each level 

var eleCount = 4; 

// should a stylesheet be included 

var noStyle = false;

[Justin Merz]

Apologies, I never did a dry run from the repo, cleaned up a could things and should work now: 

https://github.com/jrmerz/polymer-stylesheet-loading

[Steve Orvell]

The base.css file is really big: 30k lines, 1MB. Is that intended? It looks like it has 8 copies of each stylesheet.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ebde9858-d4be-4051-b8bd-21663a105d18%40googlegroups.com.

[Justin Merz]

Yup, looks like polymer was trying to point out my issue.  I will sheepishly quite down.

Using a combined stylesheet (bootstrap, font-awesome, animate.css only x1 this time) in 50+ elements still chugs a little with the polyfill Shadow Dom, but nothing too unreasonable.  Native is awesome.

Thanks for your help and apologies.