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

body {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

const template = document.createElement("template");
template.innerHTML = `
<style>
:host { display: block; }
:host-context(.card) { background:pink; }
:host-context(.card)::after { content: 'I’m in a card'; color: red; }</style>
<slot></slot>
<p>I'm shadow DOM</p>
`;

class ExampleElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });

    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("example-element", ExampleElement);