Shadow DOM in TypeScript

Articles

Questo articolo spiega Shadow DOM in TypeScript.

Spiegheremo attentamente tutto, dalle basi del Shadow DOM al suo utilizzo pratico, e forniremo esempi di codice pratici.

YouTube Video

typescript-html-shadow-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>TypeScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    h1, h2 {
 32        font-size: 1.2rem;
 33        color: #007bff;
 34        margin-top: 0.5em;
 35        margin-bottom: 0.5em;
 36        border-left: 5px solid #007bff;
 37        padding-left: 0.6em;
 38        background-color: #e9f2ff;
 39    }
 40
 41    button {
 42        display: block;
 43        margin: 1em auto;
 44        padding: 0.75em 1.5em;
 45        font-size: 1rem;
 46        background-color: #007bff;
 47        color: white;
 48        border: none;
 49        border-radius: 6px;
 50        cursor: pointer;
 51        transition: background-color 0.3s ease;
 52    }
 53
 54    button:hover {
 55        background-color: #0056b3;
 56    }
 57
 58    #output {
 59        margin-top: 1em;
 60        background-color: #1e1e1e;
 61        color: #0f0;
 62        padding: 1em;
 63        border-radius: 8px;
 64        min-height: 200px;
 65        font-family: Consolas, monospace;
 66        font-size: 0.95rem;
 67        overflow-y: auto;
 68        white-space: pre-wrap;
 69    }
 70
 71    .highlight {
 72        outline: 3px solid #ffc107; /* yellow border */
 73        background-color: #fff8e1;  /* soft yellow background */
 74        transition: background-color 0.3s ease, outline 0.3s ease;
 75    }
 76
 77    .active {
 78        background-color: #28a745; /* green background */
 79        color: #fff;
 80        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 81        transition: background-color 0.3s ease, box-shadow 0.3s ease;
 82    }
 83  </style>
 84</head>
 85<body>
 86    <div class="container">
 87        <h2>HTML Sample</h2>
 88        <div id="content"></div>
 89    </div>
 90
 91    <div class="container">
 92        <h1>JavaScript Console</h1>
 93        <button id="executeBtn">Execute</button>
 94        <div id="output"></div>
 95    </div>
 96
 97    <script>
 98        // Override console.log to display messages in the #output element
 99        (function () {
100            const originalLog = console.log;
101            console.log = function (...args) {
102                originalLog.apply(console, args);
103                const output = document.getElementById('output');
104                output.textContent += args.map(String).join(' ') + '\n';
105            };
106        })();
107
108        document.getElementById('executeBtn').addEventListener('click', () => {
109            // Prevent multiple loads
110            if (document.getElementById('externalScript')) return;
111
112            const script = document.createElement('script');
113            script.src = '/out/main.js';
114            script.id = 'externalScript';
115            //script.onload = () => console.log('typescript-html-shadow-dom.js loaded and executed.');
116            //script.onerror = () => console.log('Failed to load typescript-html-shadow-dom.js.');
117            document.body.appendChild(script);
118        });
119    </script>
120</body>
121</html>

Guida dettagliata e pratica passo-passo per `Shadow DOM`

Shadow DOM è uno dei componenti principali dei Web Components. Crea un albero DOM incapsulato che separa lo stile e la struttura del componente dall'esterno. Qui forniremo una spiegazione dettagliata delle basi del Shadow DOM, fino ai suoi casi d'uso pratici, accompagnata da esempi di codice pratico.

Cos'è il `Shadow DOM`?

Shadow DOM è una tecnologia standard del web con le seguenti caratteristiche.

Incapsulamento

Shadow DOM separa la struttura DOM interna di un componente dall'esterno. Altri stili e script non interferiscono, migliorando la riutilizzabilità.
Ambito di Stile Indipendente

Gli stili all'interno del Shadow DOM non influenzano il CSS esterno. Allo stesso modo, gli stili esterni non si applicano all'interno del Shadow DOM.
Albero DOM Isolato

Shadow DOM esiste come un albero separato dal DOM regolare, con accesso limitato dal DOM padre.

Utilizzo Base del `Shadow DOM`

Il seguente codice è il primo esempio di utilizzo del Shadow DOM.

 1class MyElement extends HTMLElement {
 2  constructor() {
 3    super();
 4
 5    // Attach Shadow DOM
 6    const shadowRoot = this.attachShadow({ mode: 'open' });
 7
 8    // Add HTML and CSS inside Shadow DOM
 9    shadowRoot.innerHTML = `
10      <style>
11        p {
12          color: blue;
13          font-size: 18px;
14        }
15      </style>
16      <p>This is inside Shadow DOM!</p>
17    `;
18  }
19}
20
21// Register the custom element
22customElements.define('my-element', MyElement);
23
24document.getElementById('content').innerHTML = `
25  <my-element></my-element>
26`;

Il browser mostrerà il testo blu: 'Questo è all'interno dello Shadow DOM!'. Lo stile di questo testo non è influenzato dal CSS esterno.

Passaggi di base del `Shadow DOM`

Per utilizzare il Shadow DOM, come mostrato in questo codice, si usa il metodo attachShadow in JavaScript. Di seguito sono riportati i passaggi di base:.

Creazione di Elementi Personalizzati Un elemento personalizzato è un tag definito dall’utente che puoi creare oltre ai tag HTML standard. In questo passaggio, crei una classe che estende HTMLElement, come la classe MyElement, preparando il browser a riconoscerla come un nuovo tag. Registrando la classe creata con customElements.define(), è possibile usarla come un tag personalizzato all’interno dell’HTML.
Collegamento del Shadow DOM Eseguendo this.attachShadow() all’interno di un elemento personalizzato, puoi creare un Shadow DOM.
Aggiunta di HTML e CSS all'interno del Shadow DOM All’interno del Shadow DOM puoi definire la tua struttura HTML e i tuoi stili. Ad esempio, impostando HTML e CSS su innerHTML, puoi dargli un aspetto e un comportamento indipendenti senza essere influenzato da CSS o HTML esterni. Questo ti permette di creare componenti incapsulati.

Modalità di `Shadow DOM`: `open` e `closed`

Shadow DOM ha due modalità: open e closed.

Modalità aperta: La shadowRoot associata allo Shadow DOM può essere accessibile esternamente.
Modalità chiusa: La shadowRoot associata allo Shadow DOM non può essere accessibile esternamente.

Di seguito un esempio di codice che mostra le differenze tra le due modalità.

 1class OpenElement extends HTMLElement {
 2  constructor() {
 3    super();
 4    this.attachShadow({ mode: 'open' }).innerHTML = `
 5      <p>Open Shadow DOM</p>
 6    `;
 7  }
 8}
 9
10class ClosedElement extends HTMLElement {
11  constructor() {
12    super();
13    this.attachShadow({ mode: 'closed' }).innerHTML = `
14      <p>Closed Shadow DOM</p>
15    `;
16  }
17}
18
19customElements.define('open-element', OpenElement);
20customElements.define('closed-element', ClosedElement);
21
22document.getElementById('content').innerHTML = `
23  <open-element></open-element>
24  <closed-element></closed-element>
25`;
26
27const openElement = document.querySelector('open-element') as OpenElement;
28console.log(openElement.shadowRoot); // ShadowRootが出力される
29
30const closedElement = document.querySelector('closed-element') as ClosedElement;
31console.log(closedElement.shadowRoot); // nullが出力される

Scegliendo la modalità closed, la proprietà shadowRoot diventa inaccessibile.

Incapsulamento dello stile utilizzando lo `Shadow DOM`

Utilizzando lo Shadow DOM, puoi completamente incapsulare gli stili all'interno dei tuoi componenti.

Il seguente esempio dimostra la separazione tra gli stili globali e gli stili all'interno del Shadow DOM.

 1class StyledElement extends HTMLElement {
 2  constructor() {
 3    super();
 4    const shadowRoot = this.attachShadow({ mode: 'open' });
 5
 6    shadowRoot.innerHTML = `
 7      <style>
 8        p {
 9          background-color: lightblue;
10          padding: 10px;
11          border: 1px solid blue;
12        }
13      </style>
14      <p>Shadow DOM Styled Content</p>
15    `;
16  }
17}
18
19customElements.define('styled-element', StyledElement);
20
21document.getElementById('content').innerHTML = `
22  <style>
23    p {
24      color: red;
25      font-weight: bold;
26    }
27  </style>
28
29  <styled-element></styled-element>
30`;

p all'interno dello Shadow DOM non sono influenzati dagli stili globali e hanno i propri stili unici applicati.

Esempio pratico di `Shadow DOM`: Tooltip Personalizzato

Successivamente, presentiamo un esempio di creazione di un tooltip personalizzato utilizzando lo Shadow DOM.

 1class Tooltip extends HTMLElement {
 2  constructor() {
 3    super();
 4
 5    const shadowRoot = this.attachShadow({ mode: 'open' });
 6
 7    shadowRoot.innerHTML = `
 8      <style>
 9        :host {
10          position: relative;
11          display: inline-block;
12          cursor: pointer;
13        }
14
15        .tooltip {
16          visibility: hidden;
17          background-color: black;
18          color: white;
19          text-align: center;
20          padding: 5px;
21          border-radius: 5px;
22          position: absolute;
23          bottom: 125%;
24          left: 50%;
25          transform: translateX(-50%);
26          white-space: nowrap;
27        }
28
29        :host(:hover) .tooltip {
30          visibility: visible;
31        }
32      </style>
33      <slot></slot>
34      <div class="tooltip">Tooltip text</div>
35    `;
36  }
37}
38
39customElements.define('custom-tooltip', Tooltip);
40
41document.getElementById('content').innerHTML = `
42  <custom-tooltip>
43    Hover over me
44    <span slot="tooltip">This is a custom tooltip!</span>
45  </custom-tooltip>
46`;

Questo codice crea un tooltip personalizzato e mostra un tooltip stilizzato quando si passa con il mouse.

Riepilogo

Shadow DOM è una tecnologia fondamentale per i Web Components, fornendo un DOM incapsulato e uno scope di stile. Qui, abbiamo trattato le basi dello Shadow DOM, il suo utilizzo, le differenze tra le modalità, l'incapsulamento dello stile e alcuni esempi pratici. Sfruttando questi strumenti, puoi costruire componenti riutilizzabili e robusti.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Classi utilizzate per la manipolazione del DOM/gestione degli eventi in TypeScript Gestione degli eventi in TypeScript

Shadow DOM in TypeScript

YouTube Video

Guida dettagliata e pratica passo-passo per Shadow DOM

Cos'è il Shadow DOM?

Utilizzo Base del Shadow DOM

Passaggi di base del Shadow DOM

Modalità di Shadow DOM: open e closed

Incapsulamento dello stile utilizzando lo Shadow DOM

Esempio pratico di Shadow DOM: Tooltip Personalizzato

Riepilogo

YouTube Video

Guida dettagliata e pratica passo-passo per `Shadow DOM`

Cos'è il `Shadow DOM`?

Utilizzo Base del `Shadow DOM`

Passaggi di base del `Shadow DOM`

Modalità di `Shadow DOM`: `open` e `closed`

Incapsulamento dello stile utilizzando lo `Shadow DOM`

Esempio pratico di `Shadow DOM`: Tooltip Personalizzato