elevated-card.ts

function getParentPiercingShadowRoots(node: Node): Node {
  return (
       node instanceof ShadowRoot ? node.host
    : (node instanceof Element && node.assignedSlot || node)?.parentNode
  );
}

@customElement('elevated-card')
export class ElevatedCard extends LitElement {
  static readonly styles = [style];

  @property({ type: Number, reflect: true }) elevation;

  connectedCallback(): void {
    super.connectedCallback();
    this.elevation = this.guessElevationInTree();
  }

  guessElevationInTree(): number {
    if (this.hasAttribute('elevation'))
      return parseInt(this.getAttribute('elevation'));
    let node = getParentPiercingShadowRoots(this);
    while (node && !(node instanceof ElevatedCard))
      node = getParentPiercingShadowRoots(node);
    const baseElevation = (node as ElevatedCard)?.elevation ?? 0;
    return (baseElevation === 2 ? 3 : baseElevation) + 1;
  }
}