Skip to content

Instantly share code, notes, and snippets.

@bennypowers
Created July 16, 2020 15:16
Show Gist options
  • Save bennypowers/e42df7bc3bb36e7260030e36fc0be2a7 to your computer and use it in GitHub Desktop.
Save bennypowers/e42df7bc3bb36e7260030e36fc0be2a7 to your computer and use it in GitHub Desktop.
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment