<odd-bird>Miriam Suzanne</odd-bird>

<template id="odd-bird">
  <style>
    /* these styles come from the shadow context */
    span {
      color: rebeccapurple;
      font-family: fantasy !important;
      font-size: 3em;
      font-weight: bold !important;
    }
  </style>
  <span part="name">
    <slot>Odd McBirdle</slot>
  </span> is Odd…
</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)
      );
    }
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.