3

I'm using Bootstrap css as a global style, and then modify it in each component if I need to, in index.htm I have:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

and then in the child I add the style

.nav li a { padding: 5px 10px; }

which also overrides the value the parent receives from bootstrap for nav li a, is this considered ok? Maybe I don't really understand the Shadow DOM...

Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview

(But you have to launch it on you pc, because I'm not sure how to make "@import '/styles/UIComponent.css';" in customer.component.css work in plunker, this way it imports the css file in header and makes it global. If you change the line to "@import '../styles/UIComponent.css';" (the two dots added) it won't import the whole css, and the emulator will translate it as needed.)

Edit: It's a bug in current Angular2 beta: https://github.com/angular/angular/issues/6449

Improve this question
5
  • 1
    Do you use the default ViewEncapsulation (Emulated) or None or Native? Commented Jan 12, 2016 at 10:40
  • @Silencer css styles will be applied based on html structure. please add the html for parent and child which have the same class name Commented Jan 12, 2016 at 10:42
  • @GünterZöchbauer the default one, Emulated, I'm not modifying it. Commented Jan 12, 2016 at 10:43
  • 1
    @Silencer to avoid child styles being applied to parent, you need have the selector like .parent-class-name [for more specific].nav li a { Commented Jan 12, 2016 at 10:45
  • 1
    @Venugopal So you're saying that it is normal for child styles to affect the parent ? That was actually the question. While at the same time, styles defined in a parent doesn't affect the child, kind of strange... Commented Jan 12, 2016 at 10:57

1 Answer 1

Reset to default
2

This should do what you want

:host .nav li a { padding: 5px 10px; }

This way you are limiting the scope of your styles to your child component.
With ViewEncapsulation.None this doesn't work of course because this is about style encapsulation and None disables exactly this.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Thanks, it works, but I find it strange that parent styles don't affect the child, while the child styles does affect the parent...
I would need to see more of your HTML and CSS to tell. Just investigate the styles and the DOM in your browsers devtools. The selectors are rewritten for style encapsulation by polyfills. I can't reproduce your problem with my simple example. :host limits to the shadow DOM of the current element. This selector is easy to rewrite. Maybe you run into an edge case where this didn't work. It might be a bug.
I think I found the bug: inside another child css: customer.component.css I imported the other css: "@import '/styles/UIComponents.css';" , I think it was a stupid think to do, as it seems that it somehow screwed up the emulation and inserted the UIComponent.css into the document, afecting all elements.
does this mean it's a bug in Angular2, the parent doesn't even inherit the style from <style> like the other components, but somehow directly from the file "UIComponents.css". Sorry for all the questions, as you can see I'm not an expert in the field :)
Well I cannot access root paths in plunker from CSS... And this is the CSS import inside the CSS file, not the import directive from angular. Thanks for all you help, you helped me a lot understand all this stuff better. Maybe I will ask the question on angular issue page, I've seen you are also active there. And anyway as i understand in CSS should be used only relative paths, not the way I did, using the root path :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.