My Vanilla JavaScript Built-In Web Elements Collection
Tags: showdev, frontend, javascript, webdev
Published: 2020-01-10 18:27:15

---
title: My Vanilla JavaScript Built-In Web Elements Collection
published: true
description: A collection of 10 built-in web elements
tags: #showdev #frontend #javascript #webdev
---

So i wrote this elements collection. The Built-In Web Elements are part of the "Web Components" specs. They allow us to extend standard HTML components and give them new super powers. I wrote them in a way that i don't need to keep repeating common UI elements. I focused on the elements behavior, keeping a minimalistic approach:

1. **Almost no style** (behavior driven style), letting you free to add your visual identity.

2. **Single purpose elements**. Every element must do only one thing. Commonly it encapsulates complex behaviors.

3. **Simplicity**. The code is very simple. The largest component source has 100 lines of code. There is no complex multi-purpose largely configurable element.

4. **Agnostic**. That means no frameworks required. You can use them anywhere, just add the `is="el-name"` attribute to give new powers to a standard HTML element.

As said by MDN: "Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps".

## Documentation and Usage

I put some effort in documenting the Collection and each element separately. The elements are really EASY to use. You load the CSS and JS files, then use the 'is' attribute to specify which behavior you want to give to your tag.

For example

```html
<div is="el-accordion" data-summary="Hello World">
  <p>Im an accordion that shows this message when expanded</p>
</div>
```

You can check live examples and docs here:
https://felippe-regazio.github.io/web-elements

And here:
https://github.com/felippe-regazio/web-elements

All elements has a rich API with events and methods.
I still need to add accessibility (needing help here).

## Element List

* ⚡️ **Accordion**

Extends the div element giving it an Accordion structure and behavior.

* ⚡️ **Card**

Extends the div element giving it a Card structure and behavior.

* ⚡️ **Header**

Extends the header element giving it a set of features as fixed on top and auto hide on scroll.

* ⚡️ **Image Viewer**

Extends the img element giving it a full screen view, the image will be showed on a lightbox when clicked.

* ⚡️ **Lazy Load IMG**

Extends the img element giving it a lazy load behavior. The images will be only loaded when visible.

* ⚡️ **Lightbox**

Extends the div element giving it a Lightbox behavior.

* ⚡️ **Mustache Template Div**

Extends the div element giving it a template engine capabilities. The div will be capable to parse json to fill its content.

* ⚡️ **Read More**

Extends the div element giving the content inside a Read More feature.

* ⚡️ **Sidebar**

Extends the div element giving it a Sidebar structure and behavior.

* ⚡️ **Spinner**

Extends the div element giving it different configurations to act like a loading spinner.

---

Contributions, critics, appointments, hints... are VERY welcome!

:)