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%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/CAKteE7M-f4_KzNW%2Bkr2Bw8v%2BaeZRNXbXo0LYwodMXvGzmF6aHg%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
