Articles
Introductie tot TypeScript
Shadow DOM in TypeScript

Shadow DOM in TypeScript

Dit artikel legt Shadow DOM in TypeScript uit.

We zullen alles zorgvuldig uitleggen, van de basis van Shadow DOM tot het praktische gebruik ervan, en praktische voorbeeldcode aanbieden.

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>

Gedetailleerde uitleg en praktische stapsgewijze handleiding voor Shadow DOM

Shadow DOM is een van de belangrijkste componenten van Web Components. Het creëert een ingekapselde DOM-boom die de stijl en structuur van de component scheidt van de buitenkant. Hier bieden we een gedetailleerde uitleg van de basisprincipes van Shadow DOM tot de praktische toepassingen, samen met interactieve voorbeeldcode.

Wat is Shadow DOM?

Shadow DOM is een technologie volgens webstandaarden met de volgende kenmerken.

  1. Inkapseling

    Shadow DOM scheidt de interne DOM-structuur van een component van de buitenkant. Andere stijlen en scripts interfereren niet, wat de herbruikbaarheid verbetert.

  2. Onafhankelijke stijlbereik

    Stijlen binnen het Shadow DOM beïnvloeden geen externe CSS. Evenzo zijn externe stijlen niet van toepassing binnen het Shadow DOM.

  3. Geïsoleerde DOM-boom

    Shadow DOM bestaat als een aparte boom van de reguliere DOM, met beperkte toegang vanaf de ouder-DOM.

Basisgebruik van Shadow DOM

De volgende code is het eerste voorbeeld waarin Shadow DOM wordt gebruikt.

 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`;
  • De browser zal de blauwe tekst weergeven: 'Dit staat in Shadow DOM!'. De stijl van deze tekst wordt niet beïnvloed door externe CSS.

Basisstappen van Shadow DOM

Om Shadow DOM te gebruiken, zoals te zien is in deze code, gebruik je de attachShadow-methode in JavaScript. Hieronder staan de basisstappen:.

  1. Maken van aangepaste elementen Een aangepast element is een door de gebruiker gedefinieerde tag die je kunt maken naast de standaard HTML-tags. In deze stap maak je een klasse die HTMLElement uitbreidt, zoals de klasse MyElement, waarmee je de browser voorbereidt om deze als een nieuw tag te herkennen. Door de gemaakte klasse te registreren met customElements.define(), kun je deze als een aangepaste tag binnen HTML gebruiken.

  2. Verbinding maken met Shadow DOM Door this.attachShadow() uit te voeren binnen een aangepast element, kun je een Shadow DOM creëren.

  3. HTML en CSS toevoegen binnen het Shadow DOM Binnen de Shadow DOM kun je je eigen HTML-structuur en stijlen definiëren. Door bijvoorbeeld HTML en CSS toe te wijzen aan innerHTML, kun je het een onafhankelijk uiterlijk en gedrag geven zonder dat het wordt beïnvloed door externe CSS of HTML. Hiermee kun je ingekapselde componenten maken.

Modi van Shadow DOM: open en closed

Shadow DOM heeft twee modi: open en closed.

  • Open modus: De shadowRoot gekoppeld aan de Shadow DOM kan extern worden benaderd.
  • Gesloten modus: De shadowRoot gekoppeld aan de Shadow DOM kan niet extern worden benaderd.

Hieronder staat een codevoorbeeld dat de verschillen tussen de twee modi laat zien.

 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が出力される
  • Kiezen voor de closed modus maakt de shadowRoot eigenschap ontoegankelijk.

Stijl-encapsulatie met behulp van Shadow DOM

Met Shadow DOM kun je stijlen volledig binnen je componenten kapselen.

Het volgende voorbeeld toont de scheiding tussen globale stijlen en stijlen binnen de 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-elementen binnen de Shadow DOM worden niet beïnvloed door globale stijlen en hebben hun eigen unieke stijlen toegepast.

Praktisch voorbeeld van Shadow DOM: Aangepaste Tooltip

Vervolgens introduceren we een voorbeeld voor het maken van een aangepaste tooltip met behulp van 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`;
  • Deze code maakt een aangepaste tooltip en toont een gestileerde tooltip bij hover.

Samenvatting

Shadow DOM is een cruciale technologie voor Web Componenten en biedt een ingekapselde DOM- en stijlomgeving. Hier hebben we de basis van Shadow DOM behandeld, inclusief het gebruik, de modale verschillen, stijl-encapsulatie, en praktische voorbeelden. Door hiervan gebruik te maken, kun je herbruikbare en robuuste componenten bouwen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Klassen Gebruikt voor DOM-manipulatie/Evenementafhandeling in TypeScriptGebeurtenisafhandeling in TypeScript