<!-- these parts are light dom -->
<odd-bird>
  <em>Miriam Suzanne</em>
</odd-bird>

<!-- the shadow-dom is defined here -->
<template id="odd-bird">
  <style>
    /* these styles come from the shadow context */
    :host {
      border: medium dotted hotpink;
      padding: 1em;
    }

    [part=name] {
      color: rebeccapurple;
      font-family: fantasy !important;
      font-size: 3em;
      font-weight: bold !important;
    }

    em {
      outline: medium solid maroon;
    }
  </style>
  <img src="oddbird.svg" alt="" />
  <span part="name">
    <slot>Odd McBirdle</slot>
  </span> is an OddBird…
</template>

::part(name) {
  /* page styles win by default */
  color: mediumvioletred;

  /* shadow-DOM styles win when important */
  font-family: monospace !important;
}

/* page layout */
html {
  height: 100%;
}

body {
  display: grid;
  min-height: 100%;
  place-content: center;
  padding: 1em;
}

// copypasta from https://twitter.com/WestbrookJ/status/1369350640019922948
customElements.define(
  "odd-bird",
  class extends HTMLElement {
    constructor() {
      super();
      let t = document.getElementById("odd-bird");
      let content = t.content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        content.cloneNode(true)
      );
    }
  }
);