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]<javascript:> > > 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] <javascript:>. >> 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/310419fd-18eb-478d-8dbc-52a493efc85b%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
