<header>
  <h1>Custom Elements for Hannukah</h1>
  <p>Inspired by <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">MDN: Web Components > Using Custom Elements</a> and <a href="https://www.chabad.org/holidays/chanukah/default_cdo/jewish/Hanukkah.htm">Chabad.org</a></p>
</header>

<main>
  <div class="menorah">
    <candle-el lit></candle-el>
    <candle-el lit></candle-el>
    <candle-el lit></candle-el>
    <candle-el lit></candle-el>
    <candle-el shamash></candle-el>
    <candle-el lit></candle-el>
    <candle-el></candle-el>
    <candle-el></candle-el>
    <candle-el></candle-el>
  </div>
</main>
h1,
p {
  text-align: center;
}

main {
  display: flex;
  justify-content: center;
}

.menorah {
  border-bottom: solid var(--menorah-material) 0.5rem;
}

:root { 
  --menorah-material: #dcc5a5;
}

class Candle extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });

    const wrapper = document.createElement("span");
    wrapper.setAttribute("class", "candle");

    const candleFlicker = document.createElement("img");
    candleFlicker.setAttribute(
      "class",
      this.hasAttribute("lit") ? "lit" : "unlit"
    );
    if (this.hasAttribute("shamash")) {
      candleFlicker.setAttribute("class", "lit shamash");
    }
    candleFlicker.setAttribute("src", this.candleDataUrl);

    const style = document.createElement("style");
    style.textContent = this.style;

    wrapper.appendChild(candleFlicker);

    this.shadowRoot.append(wrapper, style);
  }
  style = `
      .candle {
        background: var(--menorah-material);
        width: 1rem;
      }

      .unlit {
        visibility: hidden;
      }

      .lit {
        transform: translatey(-.8rem);
      }

      .shamash {
        border-bottom: solid var(--menorah-material) .5rem;
      }

      .shamesh .lit {
        transform: translatey(-1.6rem);
      }
    `
  candleDataUrl =
  "data:image/gif;base64,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"
}

customElements.define("candle-el", Candle);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.