Skip to content

Instantly share code, notes, and snippets.

@jpalala
Last active May 3, 2020 11:32
Show Gist options
  • Select an option

  • Save jpalala/1b06f2967992c93357faea1acd34f678 to your computer and use it in GitHub Desktop.

Select an option

Save jpalala/1b06f2967992c93357faea1acd34f678 to your computer and use it in GitHub Desktop.
psudoselectors - host

TIL: The :host pseudo selector

:host {
  display: block;
  border: 1px solid black;
}

// thanks to https://angular.io/guide/component-styles#host

/* 
   But wait,  why not *global styles*?
   The component's style is scoped to itself!!
   Let's say someone else is brought on to look at your code. They just have to go to the component's stylesheet. No need to look up where-is-that-stylesheet.css.
   Lastly, it's more easy to make site-wide changes! Let's just say, the pointy-haired boss says: "I want all buttons blue, no questions asked!" 
    Berto, the web designer  can just say  - "Yes boss, I'll style my button-component blue! done in 60 seconds!". 
    Boss goes:  Oh wait, sorry I meant turquoise blue... 
    ... ok done as well!
    #thinklongterm
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment