A Pen by Michael Salaverry on CodePen.
Created
December 13, 2020 18:08
Hannukah Custom Elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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