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; On Thursday, February 27, 2014 2:12:07 PM UTC-8, Justin Merz wrote: > > 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. > > On Thursday, February 27, 2014 10:19:27 AM UTC-8, Steve Orvell wrote: >> >> >> -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'. >> >> >> >> On Thu, Feb 27, 2014 at 8:58 AM, Justin Merz <[email protected]> wrote: >> >>> 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. >>> >>> >>> >>> 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/46769bee-b1f2-4c42-bc47-5d1255871f72%40googlegroups.com >>> . >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >> >> 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/a89bea3a-3de4-4931-a7b6-423cca68439c%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
