Sign in
Skip to solution
mediumFrontend

What is the difference between component styling using :host, :host-context, and ::ng-deep?

527 views
01

Understand the problem

Compare host, host-context, and deep selector targeting.

stylescss
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

:host styles the component container element. :host-context(.theme) styles the host element based on outer parent element classes. ::ng-deep pierces component styling boundaries to style child views, but is deprecated.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Styling declarations inside component css files
:host {
  display: block;
  border: 1px solid #ccc;
}

:host-context(.active-theme) {
  background-color: #000;
  color: #fff;
}

::ng-deep .third-party-widget {
  color: red !important;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 51 of 121 decoded in the Angular track. One more won't hurt.

Back to track