Vanilla Menorah

script.js

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("shamesh")) {
      candleFlicker.setAttribute("class", "lit shamesh");
    }
    candleFlicker.setAttribute(
      "src", "data:image/gif;base64,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"
    );

    const style = document.createElement("style");
    style.textContent = `
      :root { 
        --menorah-material: #dcc5a5;
      }
    
      .candle {
        background: var(--menorah-material);
        width: 1rem;
      }

      .unlit {
        visibility: hidden;
      }

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

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

      .shamesh .lit {
        transform: translatey(-1.6rem);
      }
    `;

    wrapper.appendChild(candleFlicker);

    this.shadowRoot.append(wrapper, style);
  }
}

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

style.css

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

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

body {
  height: 100vh;
  width: 100vw;
  display: grid;
  justify-content: center;
  align-content: center;
}

vanilla-menorah.markdown

Vanilla Menorah

A Pen by Michael Salaverry on CodePen.

License.

vanillaMenorah.html

<div class="menorah">
  <candle-el lit></candle-el>
  <candle-el lit></candle-el>
  <candle-el lit></candle-el>
  <candle-el></candle-el>
  <candle-el lit shamesh></candle-el>
  <candle-el></candle-el>
  <candle-el></candle-el>
  <candle-el></candle-el>
  <candle-el></candle-el>
</div>