Back to top

Le 4 caratteristiche principali delle Web Components

Scopri come vengono realizzate le web component

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.

Casi di Successo

Il leader mondiale in sistemi di controllo di impianti refrigeranti, umidificazione e aereazione presente in 75 paesi usa le nostre soluzioni Web Application e System Integration per selezionare le componenti industriali e fornire documentazione tecnica in ambiente controllato e sicuro.

Inizia ora il tuo progetto

CONTATTI

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581

Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Via Lazzaretto 19
Torino: P.zza XVIII Dicembre 5

Nome*

E-mail*

Telefono(per un contatto più rapido)

Come possiamo aiutarti?

Altro che vuoi dirci?

Inviando i tuoi dati accetti le condizioni sulla privacy. Li useremo per rispondere alle tue domande e richieste.

TOP

Articoli