Web Components is a standard introduced by the W3C for creating new elements for the web. It also allows developers to easily reuse and extend both the developed components and native elements. As they are part of the browser, no external library like jQuery is required. All you need to use your web component is a sentence in your HTML.

Therefore, the idea would be that it is available at all sites without risk of adoption, that it provides high performance without sacrificing runtime and that semantic declarative tags are maintained.

The technology

Web components are based on a combination of 4 technologies, which can be used separately:

1. Custom Elements:
Global Custom Element is used for defining a custom element, extending an existing (native) one, and teaching the browser about a new tag.

The name should be two words separated by a hyphen, so that the HTML parser can distinguish custom elements from common ones. It also ensures compatibility with future HTML tags.
It extends from the HTMLElement class. Extending the HTMLElement ensures the custom element inherits the entire DOM API, which means that any properties or methods that you add to the class become part of the element’s DOM interface. Native elements must extend from the correct DOM interface. For example, a custom element that extends from <must inherit HTMLButtonElement content instead of HTMLElement>.

2.  HTML Templates:
HTML templates allow you to define HTML fragments that can be cloned or inserted into a document.

3. Shadow DOM:
Allows us to have an independent DOM with components and styles that do not affect others.

We will replace the connected Callback method with the constructor.

4. ES Modules:
o The ECMAScript standard for importing JavaScript modules. It allows both synchronous and asynchronous loading of the modules, can analyze them statically, and therefore provides optimal loading of our dependencies.

Creating a Web Component

 Custom Element. First, we create our Custom Element.

•  We define the name of our HTML tag. Keep in mind that it must consist of two words separated by a hyphen.
• We create an index.js file and then define our Custom Element extending from HTMLElement.
• We add the connectedCallback method to our class to ensure our method is triggered once it has been added to the DOM.
• Next, we use the “define” method to connect the tag we created to our component’s class. This lets our HTML know that is must render itself.

For example:

• Window.customElements.define(‘etiqueta-componente’, ClaseComponente)
• Lastly, we load index.js, and we use the created element.

2. Shadow DOM.

The shadow DOM will allow us to have a completely independent DOM, where each element and style will not affect others. This independence means that unwanted effects are avoided.

• First, the constructor is used instead of the connectedCallback method.
• Next, we specify that the element will be attached to a Shadow DOM.
• Finally, we insert the innerHTML we had in the root of the Shadow DOM.

3. HTML templates.

These templates provide us with another way to achieve the same as with Shadow DOM. The difference is that we use ES Modules to separate the implementation of the template element. The element allows you to declare DOM fragments that are parsed, remain inactive during page loading and can be activated later at runtime.

To conclude, web components give us a new tool to define new HTML tags in the browser and create reusable components.

• It is compatible with several browsers to create and extend reusable components.
• It requires neither library nor framework.
• It provides a known programming model, DOM/CSS/HTML.
• It can be fully integrated with the browser’s DevTools.
• It takes advantage of existing accessibility features.
• The result is less code, a modularization of code and greater capacity for reuse.
• You can do almost anything that can be done with HTML, CSS and JavaScript.

Teldat’s R&D+i uses web component technology in its SD-WAN solutions, for its corporate and SME products. Web components increase our R&D+i’s efficiency when developing and we are able to offer our users, consistent interfaces.