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. On Monday, March 3, 2014 12:19:54 PM UTC-8, Steve Orvell wrote: > > 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]<javascript:> > > 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] <javascript:>. >> 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/8c28f14b-0c3f-4f24-bd5b-63f928030c2f%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
