Creare un Native Web Component in HTML

Mattepuffo's logo
Creare un Native Web Component in HTML

Creare un Native Web Component in HTML

Programmazione, HTML - CSS

I Native Web Components sono dei componenti custom creati da noi da usare nelle nostre pagine HTML.

Non so quanto ci sarà utile se usiamo llibrerie / framework; o comunque in generale visto quanti componenti abbiamo già a disposizione.

Però può essere utile sapere come si creano.

In realtà è semplice:

  • si crea una classe Javascript che estende HTMLElement
  • si registra questa classe assegnandogli un nome
  • si usa nella pagina

La cosa bella è che poi gli si possono anche applicare regole CSS, ecc.

Qui sotto un esempio completo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <style>
            my-comp {
                color: red;
                background-color: yellow;
            }
        </style>

        <script>
            class MyComponent extends HTMLElement {
                connectedCallback() {
                    this.textContent = 'CIAO!!';
                }
            }

            customElements.define('my-comp', MyComponent);
        </script>

    </head>
    <body>
        <my-comp></my-comp>
    </body>
</html>

La cosa importante è che nella classe ci sia il metodo connectedCallback; senza di quello non funziona.

Enjoy!

Condividi

Commentami!