Web Components — the right way.
Tags: showdev, webcomponents, shadowdom, html
Published: 2018-03-18 15:05:33

---
title: Web Components — the right way.
published: true
description: Art Attack with HTML.
tags: #showdev #webcomponents #shadowdom #html
cover_image: https://equinsuocha.io/blog/web-components-the-right-way/cover.png
---

From about two years we have been heard about **web components**, well this article will not explain how they work (for that [there is Google](http://bfy.tw/H9oY
)), but rather we will address the purpose of this technology, when and how use it.

We can consider web components as a tool to **extend HTML, not to replace it**. The available technologies follow the same rules that we are all used to —from always— see in the most famous language markup in the world.

> 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 utilise them in your web apps.
— MDN

## HTML — Accelerated course

Every web developer knows — or at least should — the basics of HTML and how to define the markup of a web element that will be represented by the browser in a certain way and with a specific behaviour.

![example1](https://cdn-images-1.medium.com/max/1600/1*3hAL96Wb0tyLuSV40CslKQ.png)

In the above example, like the greatest part of HTML elements, the node can accept a content that will be shown (and stylised) by the browser or by CSS user. But as we all know, it exists also elements that can not accept children nodes (well known as void elements) —for example the `<img>` and `<input>` tags — and other tags that require only some types of nodes.

The `<select>` element, like more other, is a node that uses a shadow DOM similar logic; for this reason, if you want, you can see the content of these elements in the same way as per web components:

![enabling-shadow-dom](https://cdn-images-1.medium.com/max/1600/1*Ab6dzpZOFBra_jxexg8sQQ.gif)

This is approximately the mechanic beyond this language, so we can define two different HTML element models:

- **Modular elements** — Allow children nodes (normal elements)
- **Self-closing elements** — Does not allow children nodes (void elements)

## Custom elements

As we wrote, the technologies beyond web components aim to **extend HTML**, not to replace it. What does it mean? That we have tools to create new HTML elements that would not naturally exist if not implemented by user-agents (browsers), or to extend the behaviour of those ones already existing by adding [functionalities and custom styles](https://developers.google.com/web/fundamentals/web-components/shadowdom#host).

### When?

The answer is easier than you expect. Define new HTML elements is necessary when the available ones do not meet functionality and design needs.

If we need to create a new `<my-button>` element with a customised style, we must think about the [progressive enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement). So we should add functionalities and styles, rather than completely recreate the element from scratch.

## The wrong way

If we surf on the Internet, we can find some *pattern libraries* fully composed by custom elements (using or not some frameworks, like [Polymer](https://www.polymer-project.org/)), *tests*, *examples*, *playgrounds* …and they all have one thing in common, **they are all created using a wrong pattern**. Do you remember? We are extending the HTML, so we should follow its paradigms and its composition. Here some examples:

![ex2](https://cdn-images-1.medium.com/max/1600/1*fXvsGsqwR9QcP-E9jeXsxg.png)
An entire app inside the shadow root. It’s the same as putting the app inside the `<input>` tag.

![ex3](https://cdn-images-1.medium.com/max/1600/1*vBXhxekSAeyj5U35AUkrCA.png)
A native `<button>` element wrapped… inside another custom button. [It’s the same as putting a `<button>` inside another `<button>`](https://inception.davepedu.com/).

![ex4](https://cdn-images-1.medium.com/max/1600/1*E-gG1wPhyjHbsrdABqlgKQ.png)
Does this image really need a description? Think about the `<select>` example above.

# This article continue on...
https://equinusocio.dev/blog/web-components-the-right-way/