Using Twitter Bootstrap CSS styles inside custom elements

[Leandro Cruz]

Hi all,

I installed a new Linux distro, and with it a new Chrome (35.0.1916.153). Before that, all styles defined in Twitter Bootstrap were inherited by my custom elements. Now, with the new Chrome, that's not the case anymore.

Is it possible to override the default css inheritance behavior? I don't want to change Twitter Bootstrap to use /deep/ and make it work. Also, I can't compose my elements easily and style them from "outside" without css inheritance. Example:

<my-page><my-menu></my-menu></my-page>

I can't write my css like this (my-page my-menu .menu {width: 100px;}), becase <my-menu> belongs to <my-page> shadow dom.

Am I missing something?

--

Leandro

[Eric Bidelman]

See http://stackoverflow.com/questions/24108315/bootstrap-styles-not-applying-within-a-shadow-dom-on-chrome-35

Style scoping is a core feature of Shadow DOM. You'll need to either include boostrap's css in your element (so the selectors are picked up), or modify it to use ::shadow and /deep/.

--
You received this message because you are subscribed to the Google Groups "Web Components Organisation" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webcomponent...@googlegroups.com.
To post to this group, send email to webcom...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/db0442af-5c83-4a61-8d01-2f8de3001fd2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Leandro Cruz]

Hi Eric,

Thanks for your quick reply. I added "body /deep/" to my bootstrap.css file. It's a painful experience. I think there are two solutions for this problem:

1. The Twitter Bootstrap team will provide a polymer version of their components, or

2. Add an attribute, when you import the css file, telling the browser that all selectors/rules defined in that resource should "bleed" into custom components/shadow dom.

What do you think?

--

Leandro Rodrigo Saad Cruz

[Eric Bidelman]

Have you tried including bootstrap.css in your component. That will be the least amount of pain.

--

You received this message because you are subscribed to the Google Groups "Web Components Organisation" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webcomponent...@googlegroups.com.
To post to this group, send email to webcom...@googlegroups.com.

To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/CA%2BDnGt40EMG32NJ%2Bw4%3DC7efhKb_cVNQi-ZodDRWh%3DEw5vG%2BLCQ%40mail.gmail.com.

[Revath S Kumar]

Eric,

If I have more than one component depending on bootstap.css, this may lead
to duplicate request right?
I hope browser will handle this and serve it from cache for the second
request onwards.

To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/CACGqRCCMfeuRjwMrpEZ2RBQTj1_KNRzCCbH1p3fdZO2G4DEcaQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

with regards,
Revath S Kumar,

Rubyist / JavaScripter / PHP

markdownblogger.herokuapp.com

www.phprepo.in

revathskumar.com
+919995436867

    

     

[Eric Bidelman]

Resources from the same URL are only requested by the browser once. Try loading jquery.js twice on the page: 

<script src="/path/to/jquery.js"></script>

<script src="/path/to/jquery.js"></script>

You'll only see one request.

To view this discussion on the web, visit https://groups.google.com/d/msgid/webcomponents/CAO%3DkRDLDO_4F2DZxtLbxYywwTHhjRS7QLZDV5UsrQyrsnyGA1g%40mail.gmail.com.