Web Components In recent times, architectures for Front-end development have entered a spiral of constant evolution.
We went on to absolute nonsense. Starting from web application developments. Where javascript was done with tiny brushstrokes to add dynamism. The lines of code in javascript/jquery could be a challenge for the developer in charge of maintenance. Later came the application of MVC patterns with frameworks such as Angular, Ember, and JavascriptMVC.
Thanks to these new technologies, the world for a Front-end developer becomes rosy and excellent and gives the feeling that we can rest easy with what seems like a “definitive” solution. But nothing could be further from the truth.
We leave our comfort bubble and find a new concept that is turning the development of web applications upside down: Web Components.

What are Web Components?

Therefore Web Components are a W3C standard focused on creating all kinds of functional elements in a web page to make users. Interfaces that allow us to present the information according to our objectives. But
These are four specifications that allow us to extend web development through components: small containers to encapsulate markup, Javascript code and CSS styles, But which any developer can perform to solve any need.
Libraries like Polymer, which are giving us something to talk about lately. Help us create Web Components. Other libraries. Such as AngularJS with its directives, also refer in a particular way to Web Components.

The four specifications of Web Components

Most importantlyn However, Here are the four elements we need to create a Web Component:

1.Custom Elements

Firstly, This standard gives us the ability to create HTML elements or tags in a personalized way.

2.HTML Templates

It also incorporates a system of HTML5 templates that we can consider as the basic structure of our component. They can contain both HTML and CSS, which will not be accessible from the Web application. The purpose of the “templates” is that from javascript, we can access the basic structure; it is handled conveniently and included later in our application.

3.HTML Imports

Another new capability is importing a piece of code into our HTML. Certainly This snippet can contain HTML, CSS and javascript

4.Shadow DOM

Therefore An encapsulation technique allows us to “encapsulate/isolate” a DOM within the main DOM. That is to say Seen this way, iframes come to mind. Precisely, the concept is the same! But the fundamental difference is. For example that the iframes insert a new document, while the shadow dom is part of the primary document.

Above all, A typical example of a Web Component is the Google Map or Calendar After that:
<google-map latitude=”12.678″ longitude=”-67.211″></google-map>
<google-calendar-busy-now
calendarId=”TU_ID_CAL”
apiKey=”TU_LLAVE_API”
busyLabel=”Ocupado”
freeLabel=”Estoy libre”>
</google-calendar-busy-now>

The Advantages of using Web Components

Above all, The acceptance by Front End developers and web architects of the Web Components standard is justified by the multiple advantages offered by this development technology.

  • Flexibility: Meanwhile we can use the specifications separately and independently. firstly as needed.
  • Customization: as we have seen. HTML tags are customizable, However and we can create all those we need to obtain better web semantics.
  • Innovation: the Web Components standard offers us the possibility of generating new elements to create ‘ad hoc’ developments.

Getting Started with Web Components

Let’s get to work! Let’s create a fundamental web component. For our proof of concept, we create an index.html like the following:
Next,Firstly we create our product-detail.html, where the definition of our web component will be.
for example, We have a straightforward implementation of a web component and Simple.
Soon in the Profile blog, we will see some more complex implementations of a web component, and we will delve into the creation of an element with the new javascript standard.
Firstly Do Follow us on social media and don’t miss a thing!<!DOCTYPE html><html><head><!–HTML imports new standard capacity –><link rel=”import” href=”product-detail.html”></head>
<body><!– We use our component –>
<product-detail></product-detail></body></html><template id=”productTemplate”><style>.product { display : flex;flex-direction : row;}.product > .product_img {
width: 50px;
height: 50px;
}
.product > .product_name{
flex: 1;
font-size: 2em;
colour: blue;
font-weight: bolder;
}
</style>
<div class=”product”>
<img src=”” class=”product_img”>
<div class=”product_name”></div>
</div>
</template><script>//WE KEEP A REFERENCE OF HTML IN WHICH THE SCRIPT IS FOUND, TO BE ABLE TO ACCESS THE TEMPLATEvar thisDoc = document.currentScript.ownerDocument;//WE CREATE AN OBJECT THAT INHERITS FROM THE HTMLELEMENT PROTOTYPE, DEFINED BY THE STANDARDvar productDetail = Object.create(HTMLElement.prototype);//THE CREATION OF A WEB-COMPONENT DEFINES A SERIES OF LIFE CYCLES//FOR EACH PHASE OF THE LIFE CYCLE THERE IS A CALLBACK//IN createdCallback WE WILL FOCUS ON THE RENDERING OF OUR TEMPLATEproductDetail.createdCallback = function() {var template = thisDoc.querySelector(‘#productTemplate’);//WE ACCESS THE CONTENT OF THE TEMPLATE WITH template.content//AND MANIPULATE THE CONTENTtemplate.content.querySelector(‘.product_img’).src = ‘https://support.apple.com/content/dam/edam/applecare/images/en_US/ipad/featured-content-ipad-icon_2x.png’;template.content.querySelector(‘.product_name’).textContent = ‘Product Name’;//WE CREATE A COPY OF THE TEMPLATE//see NOTES https://developer.mozilla.org/es/docs/Web/API/Document/importNodevar clone = document.importNode(template.content, true) ;//WE CREATE A SHADOW-DOM FOR OUR COMPONENT AND INCLUDE A COPY OF OUR MODIFIED TEMPLATEthis.createShadowRoot().appendChild(clone);};document.registerElement(‘product-detail’, { prototype: productDetail });< /script>