Styling shadow DOM

component.html

<template>
  <style>
    #label {
      background: var(--nametag-background);
    }
    #name {
      @extend %nametag-name;
    }
  </style>
  
  <p id="label">Hello my name is</p>
  <p id="name"><content select="name"></content></p>
</template>

<!-- assume we also set up a <name-tag> custom element using this template -->

consumer.html

<style>
  name-tag#foo %nametag-name {
    color: blue;
    opacity: 0.5;
  }

  name-tag#foo {
    --nametag-background: linear-gradient(green, blue);
  }
</style>

<p>Here's a name tag:</p>
<name-tag id="foo"><name>Domenic</name></name-tag>