Shadow DOM i TypeScript

Articles

Denne artikkelen forklarer Shadow DOM i TypeScript.

Vi vil grundig forklare alt fra det grunnleggende om Shadow DOM til praktisk bruk, og gi deg praktisk eksempelkode.

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>

Detaljert forklaring og praktisk steg-for-steg-guide til `Shadow DOM`

Shadow DOM er en av hovedkomponentene i Web Components. Det lager et kapslet DOM-tre som skiller komponentens stil og struktur fra utsiden. Her vil vi gi en detaljert forklaring av grunnleggende konsepter for Shadow DOM og dets praktiske bruksområder, sammen med praktiske eksempelkoder.

Hva er `Shadow DOM`?

Shadow DOM er en webstandardteknologi med følgende egenskaper.

Innkapsling

Shadow DOM skiller komponentens interne DOM-struktur fra utsiden. Andre stiler og skript forstyrrer ikke, noe som forbedrer gjenbrukbarheten.
Uavhengig stil-omfang

Stiler inne i Shadow DOM påvirker ikke ekstern CSS. På samme måte gjelder ikke eksterne stiler innenfor Shadow DOM.
Isolert DOM-tre

Shadow DOM eksisterer som et separat tre fra det vanlige DOM-treet, med begrenset tilgang fra overordnet DOM.

Grunnleggende bruk av `Shadow DOM`

Den følgende koden er det første eksempelet som bruker 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`;

Nettleseren vil vise den blå teksten: 'Dette er inne i Shadow DOM!'. Stilen til denne teksten påvirkes ikke av ekstern CSS.

Grunnleggende trinn av `Shadow DOM`

For å bruke Shadow DOM, som vist i denne koden, bruker du attachShadow-metoden i JavaScript. Nedenfor er de grunnleggende trinnene:.

Opprette egendefinerte elementer Et egendefinert element er en brukerdefinert tagg du kan lage i tillegg til de vanlige HTML-taggene. I dette trinnet oppretter du en klasse som utvider HTMLElement, slik som MyElement-klassen, slik at nettleseren kan gjenkjenne den som en ny tagg. Ved å registrere den opprettede klassen med customElements.define(), kan du bruke den som en egendefinert tagg i HTML.
Feste Shadow DOM Ved å kjøre this.attachShadow() inne i et egendefinert element, kan du opprette en Shadow DOM.
Legge til HTML og CSS inne i Shadow DOM Innenfor Shadow DOM kan du definere din egen HTML-struktur og stil. For eksempel, ved å sette HTML og CSS til innerHTML, kan du gi det et selvstendig utseende og oppførsel uten å bli påvirket av ekstern CSS eller HTML. Dette lar deg lage kapslede komponenter.

Modusene til `Shadow DOM`: `open` og `closed`

Shadow DOM har to moduser: open og closed.

Åpen modus: shadowRoot som er knyttet til Shadow DOM kan nås eksternt.
Lukket modus: shadowRoot som er knyttet til Shadow DOM kan ikke nås eksternt.

Nedenfor er et kodeeksempel som viser forskjellene mellom de to modusene.

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

Å velge closed modus gjør at shadowRoot-egenskapen blir utilgjengelig.

Stil-innkapsling ved bruk av `Shadow DOM`

Ved å bruke Shadow DOM, kan du fullstendig innkapsle stiler i komponentene dine.

Følgende eksempel demonstrerer adskillelsen av globale stiler og stiler innenfor 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 inne i Shadow DOM påvirkes ikke av globale stiler og har sine egne unike stiler anvendt.

Praktisk eksempel på `Shadow DOM`: Tilpasset verktøytips

Deretter introduserer vi et eksempel på hvordan du lager et tilpasset verktøytips ved hjelp av 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 koden lager et tilpasset verktøytips og viser et stilisert verktøytips ved hovering.

Sammendrag

Shadow DOM er en viktig teknologi for Web Components, som gir et innkapslet DOM og stil-omfang. Her dekket vi det grunnleggende om Shadow DOM, dets bruk, forskjeller mellom modusene, stil-innkapsling og praktiske eksempler. Ved å utnytte dette kan du lage gjenbrukbare og robuste komponenter.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Klasser brukt for DOM-manipulering/hendelseshåndtering i TypeScript

Shadow DOM i TypeScript

YouTube Video

Detaljert forklaring og praktisk steg-for-steg-guide til Shadow DOM

Hva er Shadow DOM?

Grunnleggende bruk av Shadow DOM

Grunnleggende trinn av Shadow DOM

Modusene til Shadow DOM: open og closed

Stil-innkapsling ved bruk av Shadow DOM

Praktisk eksempel på Shadow DOM: Tilpasset verktøytips

Sammendrag

YouTube Video

Detaljert forklaring og praktisk steg-for-steg-guide til `Shadow DOM`

Hva er `Shadow DOM`?

Grunnleggende bruk av `Shadow DOM`

Grunnleggende trinn av `Shadow DOM`

Modusene til `Shadow DOM`: `open` og `closed`

Stil-innkapsling ved bruk av `Shadow DOM`

Praktisk eksempel på `Shadow DOM`: Tilpasset verktøytips