Yep. For elements that require it, I skip sass altogether and inline the ^ and ^^ rules inside the element. You of course lose out on some of the niceties if sass. On Jan 31, 2014 2:24 AM, "Addy Osmani" <[email protected]> wrote:
> (bug was moved to libsass https://github.com/hcatlin/libsass/issues/238for > 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]>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%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/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. > 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/CACGqRCCjPWHGPXh2%3D59c9Ymo_s-eGC_okXesf1%3DtG2ej46fZcw%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
