Importing bootstrap does just help partially. Because various relationships are lost. Here I attempted to create a button bar, and I fail to see how I could possibly make the /deep/ version look like the regular one. But IMO this should be possible:
http://karsten-becker.de/poly_bug/bootstrapugliness.html The problems that are causing troubles are: The child descendant > (replacing it with /deep/ solves it only if there is no further nesting going on) The sibling selectors +,~ (AFAIK there is no replacement) And various pseudo classes like :first-child, :last-child etc. It would be nice to have a version of these that ignores shadow dom boundaries, and treats it like a light-dom. On Thursday, May 22, 2014 3:38:23 AM UTC+2, Elliott Sprehn wrote: > > In Chrome 35 @import or @media will disable the stylesheet sharing. > In Chrome 36 only @import will disable the sharing. > > Bootstrap should be fine in 36. I think it has @media rules which caused > issues in Chrome 35. > > I know the @import thing is a footgun. We hope to fix it eventually. :) > > > On Wed, May 21, 2014 at 3:30 PM, Eric Bidelman <[email protected]<javascript:> > > wrote: > >> +elliot >> >> This also came up recently on SO<http://stackoverflow.com/a/23794852/274673> >> . >> >> Karsten said: >> > linking the bootstrap css from each polymer-element, which works, but >> the performance penalty is way too big. >> >> Elliot, can you share what Blink does with share stylesheet caching >> across elements Something as big as Bootstrap probably breaks the >> optimizations. >> >> >> >> On Wed, May 21, 2014 at 3:11 PM, Karsten Becker >> <[email protected]<javascript:> >> > wrote: >> >>> Don't you actually need to insert a /deep/ into every descendant >>> operator? >>> Like this: >>> >>> ul li >>> { >>> background-color:yellow; >>> } >>> >>> becomes >>> >>> body /deep/ ul /deep/ li >>> { >>> background-color:yellow; >>> } >>> >>> But what about the child and sibling selectors? >>> >>> ul > li >>> { >>> background-color:yellow; >>> } >>> >>> How could you translate that? The effect that I would love to have is >>> that I can make the <li> element web component. I don't really understand >>> how one could deprecate applyAuthorStyle when those questions don't have >>> good answers. >>> >>> Essentially there should be four simple formula: >>> >>> 1) If you see a b replace it with body /deep/ a /deep/ b >>> 2) if you see a>b replace it with body /deep/ a /not-so-deep/ b >>> 3) if you see a+b replace it with body /deep/ a >>> /adjacent-ignoring-shadows/ b >>> 4) if you see a~b replace it with body /deep/ a >>> /sibling-ignoring-shadows/ b >>> >>> Disclaimer: I hate JavaScript and I am not awfully familiar with CSS. So >>> it is very possible that I am missing something here.. >>> >>> >>> 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] <javascript:>. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/04a84e86-2e31-4aff-8e5a-c7a6e468cc4c%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/04a84e86-2e31-4aff-8e5a-c7a6e468cc4c%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/c26757a4-04dc-4fe5-af5c-36aac72468d2%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
