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%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]. > 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/CACGqRCA3Ro4LgX5o%2BDmchWnjXBfEmupJ0PiQgU04QE2PQH7SjQ%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
