CSS Selector on custom element

Question

Is there any contraindications on stylizing Angular2 custom element directly and selecting them with CSS selector ?

Example :

// HTML
<My-Page>
    <header></header>
    <main></main>
    <My-Footer class="sticky-footer"></My-Footer>
</My-Page>

// CSS 
My-Page {
    background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

Good or bad practice ?

j2L4e · Accepted Answer · 2016-09-16 09:50:43Z

2

While this is perfectly valid it breaks modularity. A component can style its own root-element:

my-page.component.css

:host{
  background-color: grey;
}

header {
    ...
}

.sticky-footer {
    position: absolute;
}

This will achieve the same thing and contains CSS that's vital to your MyPageComponent in the component.

edited Sep 16, 2016 at 9:50

answered Sep 16, 2016 at 9:45

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

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

1 Comment

user3869623 Over a year ago

ealier in RC4 :host child-component{ ..} used to work.. this is no longer working in stable release .. So i had to move the child-component{..} styles set by parent into child component as :host{...}.. Hope this helps someone..

micronyks · Accepted Answer · 2016-09-16 09:52:21Z

0

You should use piercing CSS combinators >>>, /deep/ and ::shadow

styles: [
    `
     :host { background-color: grey; }

     :host >>> header{
       background:yellow;
     }

     :host >>> My-Footer{  
       position: absolute;
     }         
    `
],
template:
`
<My-Page>  //<----no need as this becomes your :host

    <header></header>
    <main></main>
    <My-Footer class="sticky-footer"></My-Footer>

</My-Page> //<----no need
`

edited Sep 16, 2016 at 9:52

answered Sep 16, 2016 at 9:42

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

2 Comments

j2L4e Over a year ago

Be aware that >>> and /deep/ (same thing) only work with angular's emulated Shadow DOM. It will break when you switch to native Shadow DOM. ::shadow and /deep/ are deprecated.

DlafCreative Over a year ago

What if I want these styles being placed in my global css file (styles.css) and not in the component styles ? Example, I've got some issues due to the root custom tag <app> in index.html. I basically need to set height: 100% on it.

Collectives™ on Stack Overflow

CSS Selector on custom element

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related