<p>The Apocalypse will never happen!</p>
<div is="apocalyptic-warning">
  <span slot="whats-coming">Undead</span>
</div>
<div is="apocalyptic-warning">
  <span slot="whats-coming">Halitosis Laden Zombie Minions</span>
</div>
<template id="warningtemplate">
  <style>
    p {
      background-color: pink;
      padding: 0.5em;
      border: 1px solid red;
    }

    p span {
      color: red;
    }
  </style>
  <p>The <slot name="whats-coming">Zombies</slot> are coming!</p>
</template>
customElements.define(
  "apocalyptic-warning",
  class ApocalypseWarning extends HTMLDivElement {
    constructor() {
      super();
      let warning = document.getElementById("warningtemplate");
      let mywarning = warning.content;

      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        mywarning.cloneNode(true)
      );
    }
  },
  { extends: "div" }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.