Shadow DOM in TypeScript

Articles

Dieser Artikel erklärt das Shadow DOM in TypeScript.

Wir erklären Ihnen sorgfältig alles von den Grundlagen des Shadow DOM bis hin zu dessen praktischer Anwendung und stellen praxisnahe Beispielcodes bereit.

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>

Detaillierte Erklärung und praktische Schritt-für-Schritt-Anleitung zum `Shadow DOM`

Shadow DOM ist eine der zentralen Komponenten von Webkomponenten. Es erzeugt einen gekapselten DOM-Baum, der die Gestaltung und Struktur der Komponente von außen trennt. Hier bieten wir eine detaillierte Erklärung der Grundlagen des Shadow DOM bis hin zu praktischen Anwendungsfällen mit interaktiven Beispielcodes.

Was ist `Shadow DOM`?

Shadow DOM ist eine Webstandard-Technologie mit den folgenden Eigenschaften.

Kapselung

Shadow DOM trennt die interne DOM-Struktur einer Komponente vom äußeren Bereich. Andere Styles und Skripte beeinträchtigen nicht, was die Wiederverwendbarkeit verbessert.
Unabhängiger Style-Bereich

Styles innerhalb des Shadow DOM beeinflussen keine externen CSS-Styles. Ebenso gelten externe Styles nicht innerhalb des Shadow DOM.
Isolierter DOM-Baum

Shadow DOM existiert als separater Baum vom regulären DOM und hat eingeschränkten Zugriff aus dem Eltern-DOM.

Grundlegende Verwendung des `Shadow DOM`

Der folgende Code ist das erste Beispiel für die Verwendung von 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`;

Der Browser zeigt den blauen Text an: 'Dies ist innerhalb des Shadow DOMs!'. Der Stil dieses Textes wird nicht von externem CSS beeinflusst.

Grundlegende Schritte des `Shadow DOM`

Um Shadow DOM zu verwenden, nutzen Sie wie in diesem Code die Methode attachShadow in JavaScript. Nachfolgend sind die grundlegenden Schritte aufgeführt:.

Erstellen benutzerdefinierter Elemente Ein benutzerdefiniertes Element ist ein selbst erstelltes Tag, das zusätzlich zu den standardmäßigen HTML-Tags verwendet werden kann. In diesem Schritt erstellen Sie eine Klasse, die HTMLElement erweitert, wie zum Beispiel die Klasse MyElement, sodass der Browser sie als neues Tag erkennt. Indem Sie die erstellte Klasse mit customElements.define() registrieren, können Sie sie als benutzerdefiniertes Tag in HTML verwenden.
Anfügen des Shadow DOM Durch Ausführen von this.attachShadow() innerhalb eines benutzerdefinierten Elements können Sie ein Shadow DOM erstellen.
Hinzufügen von HTML und CSS innerhalb des Shadow DOM Im Shadow DOM können Sie Ihre eigene HTML-Struktur und eigene Styles definieren. Indem Sie beispielsweise HTML und CSS auf innerHTML setzen, können Sie dem Element ein eigenständiges Aussehen und Verhalten verleihen, das nicht von externem CSS oder HTML beeinflusst wird. Dies ermöglicht es Ihnen, gekapselte Komponenten zu erstellen.

Modi von `Shadow DOM`: `open` und `closed`

Shadow DOM hat zwei Modi: open und closed.

Open-Modus: Das an das Shadow DOM angehängte shadowRoot kann extern zugegriffen werden.
Closed-Modus: Das an das Shadow DOM angehängte shadowRoot kann nicht extern zugegriffen werden.

Unten ist ein Code-Beispiel, das die Unterschiede zwischen den beiden Modi zeigt.

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

Die Wahl des closed-Modus macht die shadowRoot-Eigenschaft unzugänglich.

Stilkapselung mit `Shadow DOM`

Mit Shadow DOM können Sie Stile vollständig innerhalb Ihrer Komponenten kapseln.

Das folgende Beispiel zeigt die Trennung von globalen Stilen und Stilen innerhalb des 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-Elemente im Shadow DOM werden nicht von globalen Styles beeinflusst und haben ihre eigenen, einzigartigen Styles.

Praktisches Beispiel für `Shadow DOM`: Benutzerdefinierter Tooltip

Als Nächstes stellen wir ein Beispiel für die Erstellung eines benutzerdefinierten Tooltips mithilfe von Shadow DOM vor.

 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`;

Dieser Code erstellt einen benutzerdefinierten Tooltip und zeigt einen gestylten Tooltip beim Hover an.

Zusammenfassung

Shadow DOM ist eine entscheidende Technologie für Web Components, die ein gekapseltes DOM und einen Stilbereich bereitstellt. Hier haben wir die Grundlagen von Shadow DOM, seine Verwendung, die Unterschiede der Modi, die Stilkapselung und praktische Beispiele behandelt. Dadurch können Sie wiederverwendbare und robuste Komponenten erstellen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

In TypeScript verwendete Klassen für DOM-Manipulation/Ereignisbehandlung

Shadow DOM in TypeScript

YouTube Video

Detaillierte Erklärung und praktische Schritt-für-Schritt-Anleitung zum Shadow DOM

Was ist Shadow DOM?

Grundlegende Verwendung des Shadow DOM

Grundlegende Schritte des Shadow DOM

Modi von Shadow DOM: open und closed

Stilkapselung mit Shadow DOM

Praktisches Beispiel für Shadow DOM: Benutzerdefinierter Tooltip

Zusammenfassung

YouTube Video

Detaillierte Erklärung und praktische Schritt-für-Schritt-Anleitung zum `Shadow DOM`

Was ist `Shadow DOM`?

Grundlegende Verwendung des `Shadow DOM`

Grundlegende Schritte des `Shadow DOM`

Modi von `Shadow DOM`: `open` und `closed`

Stilkapselung mit `Shadow DOM`

Praktisches Beispiel für `Shadow DOM`: Benutzerdefinierter Tooltip