Shadow DOM i TypeScript

Articles

Den här artikeln förklarar Shadow DOM i TypeScript.

Vi kommer noggrant att förklara allt från grunderna i Shadow DOM till dess praktiska användning och ge praktiska exempelkoder.

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>

Detaljerad förklaring och praktisk steg-för-steg-guide till `Shadow DOM`

Shadow DOM är en av de viktigaste komponenterna i Web Components. Det skapar ett inkapslat DOM-träd som separerar komponentens stil och struktur från utsidan. Här kommer vi att ge en detaljerad förklaring av grunderna i Shadow DOM samt dess praktiska användningsområden, tillsammans med praktiska exempel.

Vad är `Shadow DOM`?

Skugg-DOM är en webstandardteknologi med följande egenskaper.

Inkapsling

Shadow DOM separerar en komponents interna DOM-struktur från utsidan. Andra stilar och skript stör inte, vilket förbättrar återanvändbarheten.
Oberoende stilomfång

Stilar inuti Shadow DOM påverkar inte extern CSS. På samma sätt gäller inte externa stilar inom Shadow DOM.
Isolerat DOM-träd

Shadow DOM existerar som ett separat träd från det vanliga DOM, med begränsad åtkomst från föräldra-DOM.

Grundläggande användning av `Shadow DOM`

Följande kod är det första exemplet som använder Skugg-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`;

Webbläsaren visar den blå texten: 'Detta är inuti Shadow DOM!'. Stilen på denna text påverkas inte av extern CSS.

Grundläggande steg för `Shadow DOM`

För att använda Shadow DOM, som visas i denna kod, använder du metoden attachShadow i JavaScript. Nedan följer de grundläggande stegen:.

Skapa anpassade element Ett anpassat element är en användardefinierad tagg som du kan skapa utöver de vanliga HTML-taggarna. I detta steg skapar du en klass som ärver från HTMLElement, såsom klassen MyElement, och förbereder webbläsaren på att känna igen den som en ny tagg. Genom att registrera den skapade klassen med customElements.define() kan du använda den som en anpassad tagg i HTML.
Bifoga Shadow DOM Genom att köra this.attachShadow() inuti ett anpassat element kan du skapa en Shadow DOM.
Lägga till HTML och CSS inuti Shadow DOM Inom Shadow DOM kan du definiera din egen HTML-struktur och dina egna stilar. Till exempel, genom att ställa in HTML och CSS till innerHTML, kan du ge det ett självständigt utseende och beteende utan att påverkas av extern CSS eller HTML. Detta gör att du kan skapa kapslade komponenter.

Lägen för `Shadow DOM`: `öppen` och `stängd`

Shadow DOM har två lägen: öppen och stängd.

Öppet läge: shadowRoot som är kopplad till Shadow DOM kan nås externt.
Stängt läge: shadowRoot som är kopplad till Shadow DOM kan inte nås externt.

Nedan är ett kodexempel som visar skillnaderna mellan de två lägena.

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

Val av stängt läge gör att egenskapen shadowRoot blir otillgänglig.

Stilinkapsling med hjälp av `Shadow DOM`

Med Shadow DOM kan du helt inkapsla stilar inom dina komponenter.

Följande exempel visar separationen mellan globala stilar och stilar inom Skugg-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-element som finns inuti Shadow DOM påverkas inte av globala stilar och har sina egna unika stilar applicerade.

Praktiskt exempel på `Shadow DOM`: Anpassad Tooltip

Nästa steg är att vi introducerar ett exempel på hur man skapar en anpassad tooltip med 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`;

Denna kod skapar en anpassad tooltip och visar en stylad tooltip vid hovring.

Sammanfattning

Shadow DOM är en viktig teknik för webbkomponenter, som tillhandahåller ett inkapslat DOM och stilområde. Här täckte vi grunderna i Shadow DOM, dess användning, lägesskillnader, stilinkapsling och praktiska exempel. Genom att utnyttja dessa kan du bygga återanvändbara och robusta komponenter.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Klasser som används för DOM-manipulation/händelsehantering i TypeScript

Shadow DOM i TypeScript

YouTube Video

Detaljerad förklaring och praktisk steg-för-steg-guide till Shadow DOM

Vad är Shadow DOM?

Grundläggande användning av Shadow DOM

Grundläggande steg för Shadow DOM

Lägen för Shadow DOM: öppen och stängd

Stilinkapsling med hjälp av Shadow DOM

Praktiskt exempel på Shadow DOM: Anpassad Tooltip

Sammanfattning

YouTube Video

Detaljerad förklaring och praktisk steg-för-steg-guide till `Shadow DOM`

Vad är `Shadow DOM`?

Grundläggande användning av `Shadow DOM`

Grundläggande steg för `Shadow DOM`

Lägen för `Shadow DOM`: `öppen` och `stängd`

Stilinkapsling med hjälp av `Shadow DOM`

Praktiskt exempel på `Shadow DOM`: Anpassad Tooltip