The base.css file is really big: 30k lines, 1MB. Is that intended? It looks like it has 8 copies of each stylesheet.
On Mon, Mar 3, 2014 at 10:08 AM, Justin Merz <[email protected]> wrote: > 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 > > > On Saturday, March 1, 2014 7:32:47 PM UTC-8, Justin Merz wrote: >> >> 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/ebde9858-d4be-4051-b8bd-21663a105d18%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/CA%2BrMWZjLeOZsTLqkE2ZhAPSsVMy3Rnw1HZLzrFMPjrSawiOt9w%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
