(bug was moved to libsass https://github.com/hcatlin/libsass/issues/238 for anyone looking)
Eric, have you been working around the cat/hat selectors not playing well with sass by moving those back to your regular <style>s too? On Thursday, 30 January 2014 00:06:58 UTC, Eric Bidelman wrote: > > David is exactly right. > > I've been using Compass on a few different Polymer projects for a while > now. In fact, I've been meaning to write an article on the > topic<https://github.com/Polymer/docs/issues/78> > . > > My approach has been to create an > _elements.scss<https://github.com/GoogleChrome/chromium-dashboard/blob/master/static/sass/elements/_element.scss>file > that elements can reuse in their > own > stylesheets<https://github.com/GoogleChrome/chromium-dashboard/blob/master/static/sass/elements/chromedash-feature.scss> > . > > The two gotchas I've ran in to: > > 1. The sass compiler barfs on ^ and ^^ selectors. > Bug<https://github.com/chriseppstein/compass/issues/1490>filed. > 2. Be careful if you're compiling such that comments are removed. Any > rules with /* @poyfill > */<http://www.polymer-project.org/docs/polymer/styling.html#polyfill-styling-directives> > will > be stripped out. I've mostly avoided this by include these advanced rules > in an inline <style> in the element. > > > On Wed, Jan 29, 2014 at 3:38 PM, David Claughton > <[email protected]<javascript:> > > wrote: > >> Hi, >> >> Another option might be, if you were to use the less/sass versions of >> those frameworks you could just include the mix-ins you needed inside each >> component. Some experimentation would probably be necessary as obviously >> those tools are not scope-aware. >> >> Cheers, >> >> David. >> >> >> On Wednesday, 29 January 2014 04:21:22 UTC, Julien Eluard wrote: >> >>> Never mind I figured 'style' elements can be created at some higher >>> level and then appended to the right ShadowDOM as needed thus allowing to >>> share rule definitions. >>> >>> Julien >>> >>> 2014-01-29 Julien Eluard <[email protected]> >>> >>> Thanks for the detailed answer! >>>> >>>> >>How can I use a CSS framework here without introducing copying and >>>> memory overhead across components? >>>> >Chrome's implementation will ensure that styles are shared across >>>> custom element instances. >>>> >>>> Across instances yes, but across different element types from a library >>>> styled with the same CSS framework? >>>> Even If I try to remove all superfluous rules for each type there could >>>> be significant duplicated rules overall. >>>> >>>> Julien >>>> >>>> Le mardi 28 janvier 2014 19:04:32 UTC-3, Steve Orvell a écrit : >>>>> >>>>> Lemme respond to these points out of order: >>>>> >>>>> Unless I am missing something I don't think current features are >>>>>> sufficient in this regard. Is this something polymer -the library- plans >>>>>> to >>>>>> address? >>>>> >>>>> >>>>> Polymer intends to provide an element theme-ing system. We think we >>>>> have the primitives to do this but the proof is in the pudding. It's a >>>>> high >>>>> priority. >>>>> >>>>> I can think of several use cases where ^ and ^^ would be somewhat >>>>>> limited. >>>>> >>>>> >>>>> Yes, in general, this is a very hard problem. We're attempting to >>>>> combine a language in css that's intended to style a single tree of >>>>> elements with a system that provides an inter-meshing tree of trees. >>>>> >>>>> The general starting point is that a custom element author provides a >>>>> styling api, e.g. style the menu's icon via the .icon class. Then you can >>>>> use, for example, x-menu ^ .icon. >>>>> >>>>> How can I use a CSS framework here without introducing copying and >>>>>> memory overhead across components? >>>>>> >>>>> >>>>> Chrome's implementation will ensure that styles are shared across >>>>> custom element instances. >>>>> >>>>> ... Relying on ^ and ^^ looks unpractical in the case of a CSS >>>>>> framework as this essentially implies rewriting it. >>>>> >>>>> >>>>> Yes. In general, we have to own this new concept of scopes. It's not >>>>> going to and shouldn't be trivial to jump into styling a shadowRoot. It's >>>>> going to take some getting used to and may indeed require some additional >>>>> platform support. >>>>> >>>>> >>>>> On Tue, Jan 28, 2014 at 1:36 PM, Julien Eluard <[email protected]>wrote: >>>>> >>>>>> Right, no question applyAuthorStyles was dangerous. >>>>>> >>>>>> I can think of several use cases where ^ and ^^ would be somewhat >>>>>> limited. >>>>>> >>>>>> Assuming you want to write a set of reusable components relying on >>>>>> ShadowDOM: >>>>>> >>>>>> * they will have a default style, whose implementation is hidden. How >>>>>> can I use a CSS framework here without introducing copying and memory >>>>>> overhead across components? >>>>>> * users should be able to override those styles easily. Relying on ^ >>>>>> and ^^ looks unpractical in the case of a CSS framework as this >>>>>> essentially >>>>>> implies rewriting it. >>>>>> >>>>>> Those 2 points seems pretty important to allow the creation of >>>>>> library of components. Unless I am missing something I don't think >>>>>> current >>>>>> features are sufficient in this regard. Is this something polymer -the >>>>>> library- plans to address? >>>>>> >>>>>> Thanks, >>>>>> Julien >>>>>> >>>>>> Le mardi 28 janvier 2014 15:31:03 UTC-3, Steve Orvell a écrit : >>>>>>> >>>>>>> Good question. The recommended approach is to load the css in the >>>>>>> scope in which it should apply. If you need scope crossing selectors, >>>>>>> you'll need to rewrite the styling with ^ and ^^. >>>>>>> >>>>>>> While it's true that the removal of applyAuthorStyles makes this >>>>>>> particular use case more difficult, there were good reasons for its >>>>>>> removal: >>>>>>> >>>>>>> (1) applyAuthorStyles was always intended as a stop-gap. The right >>>>>>> answer is to specifically style each scope, as mentioned above. >>>>>>> (2) applyAuthorStyles had a built in footgun. While it allowed >>>>>>> selectors to jump scopes, the selectors had to match entirely within a >>>>>>> given scope, e.g. 'ul li' would not match if the li was in the ul's >>>>>>> shadowRoot. This meant it would sometimes work, but it would sometimes >>>>>>> not >>>>>>> and figuring out why was very arcane. >>>>>>> >>>>>>> >>>>>>> On Tue, Jan 28, 2014 at 10:18 AM, Julien Eluard <[email protected] >>>>>>> > wrote: >>>>>>> >>>>>>>> Hi, >>>>>>>> >>>>>>>> (Apologies if this is not the right place to discuss the following) >>>>>>>> >>>>>>>> I used to rely on 'applyAuthorStyles' to apply styles available >>>>>>>> from the main document to components relying on ShadowDOM. A typical >>>>>>>> usage >>>>>>>> is having all basic elements share styles defined by CSS framework >>>>>>>> (bootstrap, foundation). 'applyAuthorStyles' has been removed from the >>>>>>>> ShadowDOM spec and recently from Chrome Canary so I am looking for a >>>>>>>> replacement. >>>>>>>> >>>>>>>> It does not appear ^ and ^^ could help as they can't refer to >>>>>>>> existing CSS rules. They do work when user defines their own rules >>>>>>>> though. >>>>>>>> >>>>>>>> What is the recommended way to achieve that? >>>>>>>> >>>>>>>> Thanks, >>>>>>>> Julien >>>>>>>> >>>>>>>> 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/4bb69407-92c0- >>>>>>>> 4bf2-a296-8c3646164039%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/2aaea87f-baad-469f-8caa-da1929063d39%40googl >>>>>> egroups.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/235dda43-d703-4ef4-ab7e-8aebe1590d75%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/2bebe8da-57aa-4192-bdfd-8d2174bc44ac%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
