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] <javascript:>> > >> 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%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/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.
