Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hannukah Custom Elements
<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></candle-el>
<candle-el></candle-el>
<candle-el></candle-el>
<candle-el></candle-el>
</div>
</main>
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,R0lGODlhDAAaAPcAAP///5JtOZpxPZ51PZp5TfeiHPemIPeuJPelKPeqKPeuKPeoLfeuLvezJPe0KPe2Lfe6Kve+LveqNfe+NfeyOffCKPfCLffGLffCMffGNffKN/fGO/rKPauKXbKOYfOmQfe2QfeyRfe6Sfe6XcqmdfO6bffSRfvSSffZTffKUffOXffbUffXXfnbW/fKY/fCdfffeffbfffhaffjbfvhbffjdbqunu++kvfXhvPOkvfngvfrju/jlvfrnvPKovfXovPSrvPCsvXXsPfSuvXXuO/npvvvpvfvrvHnsvjrsvvvtsbCxszMzNfS0tvb2/fbxvfXzufnzu/pyvPrwvvxxO/j0u/t0u/v1+fp3ffp0Pvv0vv30vvx1/vz2+fn6+/v7Pv05/374/v75/v76/v77/f39/vz8/f48//79/z3+/euHPekJPeuN/euPfe6O6aGWfOyTfO6ZfO2fffCQffOQfvKQfvOSvvXTffXVffhW/fGbffUYffSbffZbffbdfnjY/fjfcK2pvO+ovO+qvPCgvPGlvfOmvfSlvfnhvfjkvfrkuvjpu/nqvvvqvfjuvfvvuvfzuHf3ffb1+/vwvfjwvvzzuPn1+nr0uPj3+vr2/fj0vvv3/vr4/Tr6/v27PXz8/v38/v395p1Qbqaa9fKuvPz4wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJEQBqACH+IENyZWF0ZWQgd2l0aCBlemdpZi5jb20gZ2lmIG1ha2VyACwAAAAADAAaAAAHvoBqgoOEg2RghYVkQGaJhEJBjoNiN1CSgj4lRJdPIBJDkkQhBh9ZjjkMCwUjAIkvDAgICT+FaC4UCQkGIoiDXCoUCgcHDTiDADEnEw8ODQ0pZIJgLBwYFhUREBtUglotGRomJhoXGEqCRysnJzQ6Kxkc52pUMi0wSEczKC1dgls1O6aUGZOkho5WasgY6XEljZcoPLYQClPkjAcbVaSgIYTGChYBTMggLIQlQJNLXwYsuQSAgJNLajrAVEMiUSAAIfkECQoACwAsAAAAAAwAGgAACM8AFwgcOJCSGIIIJQkBgHBgKEFaGgoEMKgQw4ZpCMV5IhGAHAMjOEk0tEYBHE0NN1FYw4CNEIQA9BRAgKDNIYSOFBhIkMANn4sLAKhQc+CAAjd7PA1MMqdBAwgQJthJNNBPBQgVLlywUKcPKIEtstJBcUIDBxldBNLgoOHPDhp27uRRIjAJnjyIHiEB9KdG2gVkECGaEqrMJB2ADgqstMiSQCuKGhEEIOXSp0+ZGClG2CFQlSsSPwmIREbiAkwBTAvENEB1UAKuO71xDYlEw4AAIfkECQoATgAsAAAAAAwAGgAAB72AToKDhINkYIWFZEBmiYRCQY6DYjdQkoI+JUSXTyASQ5JEIQYfWY45DAsFIwCJLwwICAk/hWguFAkJBiKIg1wqFAoHBw04gwAxJxMPDg0NKWSCYCwcGBYVERAbVIJaLRkaJiYaFxhKgkcrJyc0OisZHOdOVDItMEhHMygtXYJbNTumlBmTpIaOVk7IGOlxJY2XKDy2EApT5IwHG1WkoCGExgoWAUzIICyEJUCTS18GLLkEgMAlQR1eOiGRKBAAIfkECQwAAgAsAAAAAAwAGgAACM4ABQgcOJCSGIIIJQkBgHBgKEFaGgoEMKgQw4ZpCMV5IhGAHAMjOEk0tEYBHE0NN1FYw4CNEIQA9BRAgKDNIYSOFBhIkMANn4sCAKhQc+CAAjd7PA1MMqdBAwgQJthJNNBPBQgVLlywUKcPKIEtstJBcUIDBxldBNLgoOHPDhp27uRRIjAJnjyIHiEB9KdGWgFkECGaEqrMJB2ADgqstMiSQCuKGhEEIOXSp0+ZGClGOIpUlVISQ4n6gkaigC8BTAv8MkB10DeuBYyKTaJhQAAh+QQJCgBOACwAAAAADAAaAAAHvYBOgoOEg2RghYVkQGaJhEJBjoNiN1CSgj4lRJdPIBJDkkQhBh9ZjjkMCwUjAIkvDAgICT+FaC4UCQkGIoiDXCoUCgcHDTiDADEnEw8ODQ0pZIJgLBwYFhUREBtUglotGRomJhoXGEqCRysnJzQ6Kxkc505UMi0wSEczKC1dgls1O6aUGZOkho5WTsgY6XEljZcoPLYQClPkjAcbVaSgIYTGChYBTMggLIQlQJNLXwYsuQSAwCVBHV46IZEoEAAh+QQJDAACACwAAAAADAAaAAAIzgAFCBw4kJIYggglCQGAcGAoQVoaCgQwqBDDhmkIxXkiEYAcAyM4STS0RgEcTQ03UVjDgI0QhAD0FECAoM0hhI4UGEiQwA2fiwIAqFBz4IACN3s8DUwyp0EDCBAm2Ek00E8FCBUuXLBQpw8ogS2y0kFxQgMHGV0E0uCg4c8OGnbu5FEiMAmePIgeIQH0p0ZaAWQQIZoSqswkHYAOCqy0yJJAK4oaEQQg5dKnT5kYKUY4ilSVUhJDifqCRqKALwFMC/wyQHXQN64FjIpNomFAADs="
}
customElements.define("candle-el", Candle);
h1,
p {
text-align: center;
}
main {
display: flex;
justify-content: center;
}
.menorah {
border-bottom: solid var(--menorah-material) 0.5rem;
}
:root {
--menorah-material: #dcc5a5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment