Shadow DOM i TypeScript

Articles

Denne artikel forklarer Shadow DOM i TypeScript.

Vi vil omhyggeligt forklare alt fra det grundlæggende om Shadow DOM til dets praktiske anvendelse og give praktiske eksempelkoder.

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>

Detaljeret forklaring og praktisk trin-for-trin guide til `Shadow DOM`

Shadow DOM er en af de centrale komponenter i Web Components. Det skaber et kapslet DOM-træ, der adskiller komponentens stil og struktur fra omgivelserne. Her giver vi en detaljeret forklaring af grundprincipperne for Shadow DOM og dens praktiske anvendelsesmuligheder, sammen med eksempler på brugbar kode.

Hvad er `Shadow DOM`?

Shadow DOM er en webstandardteknologi med følgende egenskaber.

Indkapsling

Shadow DOM adskiller den interne DOM-struktur i en komponent fra omgivelserne. Andre stilarter og scripts interfererer ikke, hvilket forbedrer genbrugeligheden.
Uafhængigt stilområde

Stilarter inde i Shadow DOM påvirker ikke ekstern CSS. Tilsvarende anvendes eksterne stilarter ikke i Shadow DOM.
Isoleret DOM-træ

Shadow DOM eksisterer som et separat træ fra det almindelige DOM og har begrænset adgang fra det overordnede DOM.

Grundlæggende brug af `Shadow DOM`

Følgende kode er det første eksempel, der bruger 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`;

Browseren vil vise den blå tekst: 'Dette er inde i Shadow DOM!'. Stilen på denne tekst påvirkes ikke af ekstern CSS.

Grundlæggende trin for `Shadow DOM`

For at bruge Shadow DOM anvender du attachShadow-metoden i JavaScript, som vist i denne kode. Nedenfor er de grundlæggende trin:.

Oprettelse af brugerdefinerede elementer Et brugerdefineret element er en brugerdefineret tag, som du kan oprette ud over de standard HTML-tags. I dette trin opretter du en klasse, der udvider HTMLElement, som f.eks. MyElement-klassen, så browseren kan genkende den som et nyt tag. Ved at registrere den oprettede klasse med customElements.define() kan du bruge den som en brugerdefineret tag i HTML.
Tilføjelse af Shadow DOM Ved at udføre this.attachShadow() inde i et brugerdefineret element kan du oprette et Shadow DOM.
Tilføjelse af HTML og CSS inde i Shadow DOM Inden for Shadow DOM kan du definere din egen HTML-struktur og dine egne stilarter. For eksempel, ved at sætte HTML og CSS til innerHTML, kan du give det et selvstændigt udseende og opførsel uden at blive påvirket af ekstern CSS eller HTML. Dette giver dig mulighed for at skabe indkapslede komponenter.

Tilstande for `Shadow DOM`: `open` og `closed`

Shadow DOM har to tilstande: open og closed.

Open mode: shadowRoot, der er tilknyttet Shadow DOM, kan tilgås eksternt.
Closed mode: shadowRoot, der er tilknyttet Shadow DOM, kan ikke tilgås eksternt.

Nedenfor er et kodeeksempel, der viser forskellene mellem de to tilstande.

 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が出力される

Hvis du vælger closed-tilstand, bliver shadowRoot-egenskaben utilgængelig.

Stilindkapsling ved brug af `Shadow DOM`

Ved at bruge Shadow DOM kan du fuldstændigt indkapsle stilarter inden for dine komponenter.

Følgende eksempel demonstrerer adskillelsen mellem globale stilarter og stilarter inden for 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-elementer inde i Shadow DOM påvirkes ikke af globale stilarter og har deres egne unikke stilarter anvendt.

Praktisk eksempel på `Shadow DOM`: Brugerdefineret Tooltip

Næste introducerer vi et eksempel på, hvordan man opretter en brugerdefineret tooltip ved hjælp af 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`;

Denne kode skaber en brugerdefineret tooltip og viser en stylet tooltip ved hover.

Sammendrag

Shadow DOM er en vigtig teknologi for Web Components, der giver en indkapslet DOM og stilomfang. Her dækkede vi det grundlæggende i Shadow DOM, dets anvendelse, forskelle mellem tilstande, stilindkapsling og praktiske eksempler. Ved at udnytte disse kan du bygge genanvendelige og robuste komponenter.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Klasser brugt til DOM-manipulation/hændelseshåndtering i TypeScript

Shadow DOM i TypeScript

YouTube Video

Detaljeret forklaring og praktisk trin-for-trin guide til Shadow DOM

Hvad er Shadow DOM?

Grundlæggende brug af Shadow DOM

Grundlæggende trin for Shadow DOM

Tilstande for Shadow DOM: open og closed

Stilindkapsling ved brug af Shadow DOM

Praktisk eksempel på Shadow DOM: Brugerdefineret Tooltip

Sammendrag

YouTube Video

Detaljeret forklaring og praktisk trin-for-trin guide til `Shadow DOM`

Hvad er `Shadow DOM`?

Grundlæggende brug af `Shadow DOM`

Grundlæggende trin for `Shadow DOM`

Tilstande for `Shadow DOM`: `open` og `closed`

Stilindkapsling ved brug af `Shadow DOM`

Praktisk eksempel på `Shadow DOM`: Brugerdefineret Tooltip