On Thu, May 22, 2014 at 5:39 AM, Karsten Becker <[email protected]> wrote:
> ok, so I did write a quick tool for that: > https://github.com/KarstenB/csstransform and used the resulting > https://github.com/KarstenB/csstransform/blob/master/bootstrap_deep.cssbut a > few issues arise from that: > In Canary the /deep/'d version has priority over local declarations even > within the element (not a good idea), so those have to be marked as > !important > I disagree with this statement. With the encapsulation of styles that web components provide, there has to be some way to provide more information to the component than it had at creation time. /deep/ and ::shadow solve this by providing that information from the outside world. If the interior of a component were the only way to control styling, then there would have to be much more cooperation between them and the page author. > Browsers that are not aware of /deep/ fail to render anything correctly. > So you need to provide a switch based on the fact whether applyAuthorStyle > is supported... (very ugly) > The workaround you really want is the css "all" property set to "inherit". https://developer.mozilla.org/en-US/docs/Web/CSS/all. This property is a superset of the old applyAuthorStyles and resetStyleInheritance properties of ShadowDOM, and it can be applied with normal css selectors and not set on each ShadowRoot instance. Here is the "intent to implement" email regarding blink's (and therefore Chrome's) status on "all": https://groups.google.com/a/chromium.org/d/msg/blink-dev/VkDKCvdVKlA/yGYNtgxnsHMJ > > > On Wednesday, May 21, 2014 8:21:53 PM UTC+2, John Messerly wrote: > >> Idea here: could bootstrap.css be preprocessed to add this before each >> selector: >> * /deep/ >> >> There are a few libraries out there for parsing CSS files. Probably not >> too hard to write a script for it. >> >> >> On Wed, May 21, 2014 at 10:52 AM, 'Rob Dodson' via Polymer < >> [email protected]> wrote: >> >>> This is kind of where the old world bumps up against the new world. >>> Bootstrap was never designed to work with Web Components so it's not easy >>> to shoehorn it in. >>> >>> It sounds like what you want is for an element to know about and style >>> its internal structure, but externally you should be able to easily theme >>> these things so they look cohesive (probably by using /deep/). I don't >>> think there's a quick fix way to go about that. Bootstrap (and libraries >>> like it) will need to be rewritten to work in that model. >>> >>> FWIW, we talk about this exact issue _a lot_ and we're trying to come up >>> with good strategies to deal with it. So definitely don't take this as >>> dismissal in any way. It's just a tough nut to crack ;) >>> >>> >>> On Wed, May 21, 2014 at 8:30 AM, Douglas Hubler <[email protected]>wrote: >>> >>>> I'm in the exact same situation with Polymer and Bootstrap in fact. >>>> I'm blissfully productive using leaking CSS. IMO Karsten was on the >>>> right track w/fixing this in bootstrap, there needs a adapter to be shadow >>>> dom aware. Maybe there's some clever less/sass/stylus hacking to make this >>>> painless. If i pull in a third party set of tags that are bootstrap >>>> based, then I should be able to apply same adapter to them as well. If >>>> third party has specified CSS locally, then that would be difficult I think >>>> and would be an argument against defining them locally IMO. >>>> >>>> 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/b7ea2376-0c7f-4383-8e6f-c0317a1a3b8e% >>>> 40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/b7ea2376-0c7f-4383-8e6f-c0317a1a3b8e%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> 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/CAJj5OwCW-j%2Bc%2BLH4dO7p5QLy% >>> 3DWG6ennVipAhgFpXq2y9t7njcA%40mail.gmail.com<https://groups.google.com/d/msgid/polymer-dev/CAJj5OwCW-j%2Bc%2BLH4dO7p5QLy%3DWG6ennVipAhgFpXq2y9t7njcA%40mail.gmail.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> 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/a640ff38-8794-4dec-b47e-4c2b0b610985%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/a640ff38-8794-4dec-b47e-4c2b0b610985%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > 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/CAAUAVAhafNw%2BhJP6z0SaDjKSB4mtMnYFbo7gCOzmC8NwFD1%2BGg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
