On this page

`:host-context()` pseudo-class

html

<example-element></example-element>
<div class="card">
  <example-element></example-element>
</div>

<example-element></example-element>
<div class="card">
  <example-element></example-element>
</div>

css

:host-context(.card) { background:pink; }
:host-context(.card)::after { content: 'I’m in a card'; color: red; }

:host-context(.card) { background:pink; }
:host-context(.card)::after { content: 'I’m in a card'; color: red; }

Demo

Resources