Le Web Components sono parte integrante dei migliori framework come Angular, Vue e React. Scopriamo quali sono i pilastri su cui si basa una Web Component.
Custom Elements
Il Custom Element altro non è che un tag HTML che viene utilizzato come i più comuni ma che reagisce ai cambiamenti e che, di fatto, rende più numeroso l’insieme degli esistenti. Ogni Custom Element estende la classe HTMLElement, in cui risiedono i metodi, anche detti reactions, che vengono chiamati in risposta di un evento. Per es. il metodo connectedCallback viene chiamato quando un nuovo elemento appare sullo schermo ed il metodo attributeChangedCallback quando viene modificato un attributo.
E’ possibile anche estendere le funzionalità di un elemento già esistente, per es. <input>, utilizzando la relativa classe, per es. HTMLInputElement e poi nello sviluppo usare l’attributo is=”” per identificarlo.
HTML Template
I Template sono strutture HTML pronte all’uso, inerti fino a quando non vengono utilizzate. I Template contengono all’interno tutto il necessario come HTML,CSS e JS. Per precisione i template non sono limitati alle web component ma possono essere utilizzati in qualsiasi web application, però è con le web component che esprimono il maggiore valore.
Shadow DOM
Il Document Object Model (DOM) rappresenta come il browser interpreta la struttura di una pagina web. Per le web components viene creato uno shadow DOM ed applicato all’elemento così che qualsiasi contenuto possa essere inserito all’interno. Il DOM standard e lo shadow DOM non comunicano direttamente così è possibile creare creare classi, stili e script senza alcuna preoccupazione.
ES e HTML Modules
Grazie a Javascript è possibile integrare tutti gli elementi assieme e renderli esportabili come moduli. Per esempio:
export class MyElement extends HTMLElement {....}import {MyElement} from "MyElement.js";Glue Labs e le Web Components
Ti forniamo sviluppo di Web Application e Progressive Web App(PWA), assistenza e supporto per qualsiasi progetto ed inoltre realizziamo corsi custom per la tua impresa grazie al servizio di formazione avanzata. Contattaci subito e senza impegno per un preventivo gratuito.
