Custom Elements are reusable html elements which can encapsulate implementation details into components. Custom Elements are part of the Web Component spec, which is supported by all the major browsers. Custom Elements can be used to bring the component model of React/Angular/Vue to the native web platform without any added dependencies costing valuable network capacity.
Here's an example:
For this example, and in honor of the current Jewish Holiday of Hanukkah, I decided to create a Custom Element for Menorah lights. A menorah has 9 spaces for lights (candles or oil lamps) in total. Each night of Hanukkah, we ignite one more light using the helper light, the shamash. The shamash is always a bit taller than the rest.
Let's take a look at the HTML to see what makes this special:
Rather than rewrite the same HTML 9 times (span>img.candle), I created one reusable custom element for a candle. A "candle-el" can be (lit or unlit) and (normal or shamash). We can create custom attributes on custom elements which can modify that element's styling, behavior, or contents. In this case, each candle listens for the "lit" and the "shamash" attributes to see if it needs to have different styling. I want this to work like the "checked" attribute on HTMLInputElements.
(Homework idea: Click "edit on codepen" and try adding and removing "lit" from the various candle elements in the codepen to see how it changes the styling.)
Custom Elements are probably built into your browser, and require no transpilation/bundling/etc, so all you'll need is your browser and a text editor. Codepen is great for this.
Since the appeal of Custom Elements is no dependencies, let's try getting started without any frameworks. While Custom Elements are a useful tool even in a React/Angular/Vue project, we don't need those to get started.
document.createElement to create elements for rendering into the DOM.