Shadow DOM dalam TypeScript

Articles

Artikel ini menerangkan Shadow DOM dalam TypeScript.

Kami akan menerangkan dengan teliti segala-galanya dari asas-asas Shadow DOM hingga kepada penggunaannya secara praktikal, serta menyediakan kod contoh untuk latihan amali.

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>

Penjelasan Terperinci dan Panduan Langkah Demi Langkah Praktikal untuk `Shadow DOM`

Shadow DOM adalah salah satu komponen utama dalam Komponen Web. Ia mencipta pokok DOM yang terasing yang memisahkan gaya dan struktur komponen daripada bahagian luar. Di sini, kami akan memberikan penjelasan terperinci tentang asas Shadow DOM sehingga kepada kes penggunaan praktikalnya, bersama dengan kod sampel.

Apakah itu `Shadow DOM`?

Shadow DOM adalah teknologi standard web dengan ciri-ciri berikut.

Pengkapsulan

Shadow DOM memisahkan struktur DOM dalaman komponen daripada bahagian luar. Gaya dan skrip lain tidak akan mengganggu, meningkatkan kebolehgunaan semula.
Skop Gaya Bebas

Gaya di dalam Shadow DOM tidak mempengaruhi CSS luar. Begitu juga, gaya luar tidak terpakai di dalam Shadow DOM.
Pokok DOM Terpencil

Shadow DOM wujud sebagai pokok yang terpisah daripada DOM biasa, dengan akses terhad daripada DOM induk.

Penggunaan Asas `Shadow DOM`

Kod berikut adalah contoh pertama menggunakan 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`;

Pelayar akan memaparkan teks biru: 'Ini berada di dalam Shadow DOM!'. Gaya teks ini tidak terjejas oleh CSS luaran.

Langkah-langkah asas `Shadow DOM`

Untuk menggunakan Shadow DOM, seperti yang ditunjukkan dalam kod ini, anda menggunakan kaedah attachShadow dalam JavaScript. Berikut adalah langkah-langkah asas:.

Mencipta Elemen Tersuai Elemen tersuai ialah tag yang ditakrifkan oleh pengguna yang boleh anda cipta sebagai tambahan kepada tag HTML standard. Dalam langkah ini, anda mencipta kelas yang melanjutkan HTMLElement, seperti kelas MyElement, untuk membolehkan pelayar mengenal pasti ia sebagai tag baharu. Dengan mendaftarkan kelas yang dicipta menggunakan customElements.define(), anda boleh menggunakannya sebagai tag tersuai dalam HTML.
Melampirkan Shadow DOM Dengan melaksanakan this.attachShadow() di dalam elemen tersuai, anda boleh mencipta Shadow DOM.
Menambah HTML dan CSS di Dalam Shadow DOM Di dalam Shadow DOM, anda boleh mentakrif struktur dan gaya HTML anda sendiri. Sebagai contoh, dengan menetapkan HTML dan CSS pada innerHTML, anda boleh memberikannya penampilan dan kelakuan yang bebas tanpa dipengaruhi oleh CSS atau HTML luaran. Ini membolehkan anda mencipta komponen yang terlingkung.

Mod `Shadow DOM`: `open` dan `closed`

Shadow DOM mempunyai dua mod: open dan closed.

Mod Open: shadowRoot yang disambungkan kepada Shadow DOM boleh diakses secara luaran.
Mod Closed: shadowRoot yang disambungkan kepada Shadow DOM tidak boleh diakses secara luaran.

Berikut adalah contoh kod yang menunjukkan perbezaan antara dua mod tersebut.

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

Memilih mod closed menjadikan sifat shadowRoot tidak dapat diakses.

Inkapsulasi gaya menggunakan `Shadow DOM`

Menggunakan Shadow DOM, anda boleh sepenuhnya menginkapsulasi gaya dalam komponen anda.

Contoh berikut menunjukkan pemisahan antara gaya global dan gaya dalam 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 di dalam Shadow DOM tidak terjejas oleh gaya global dan mempunyai gaya unik mereka sendiri.

Contoh praktikal `Shadow DOM`: Tooltip Tersuai

Seterusnya, kami memperkenalkan contoh membuat tooltip tersuai menggunakan 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`;

Kod ini mencipta tooltip tersuai dan memaparkan tooltip bergaya apabila hover.

Ringkasan

Shadow DOM adalah teknologi penting untuk Komponen Web, menyediakan DOM dan skop gaya yang diinkapsulasi. Di sini, kami telah merangkumi asas Shadow DOM, penggunaannya, perbezaan mod, inkapsulasi gaya, dan contoh praktikal. Dengan memanfaatkan ciri-ciri ini, anda boleh membina komponen yang boleh diguna semula dan kukuh.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Kelas Digunakan untuk Manipulasi DOM/Pengendalian Acara dalam TypeScript

Shadow DOM dalam TypeScript

YouTube Video

Penjelasan Terperinci dan Panduan Langkah Demi Langkah Praktikal untuk Shadow DOM

Apakah itu Shadow DOM?

Penggunaan Asas Shadow DOM

Langkah-langkah asas Shadow DOM

Mod Shadow DOM: open dan closed

Inkapsulasi gaya menggunakan Shadow DOM

Contoh praktikal Shadow DOM: Tooltip Tersuai

Ringkasan

YouTube Video

Penjelasan Terperinci dan Panduan Langkah Demi Langkah Praktikal untuk `Shadow DOM`

Apakah itu `Shadow DOM`?

Penggunaan Asas `Shadow DOM`

Langkah-langkah asas `Shadow DOM`

Mod `Shadow DOM`: `open` dan `closed`

Inkapsulasi gaya menggunakan `Shadow DOM`

Contoh praktikal `Shadow DOM`: Tooltip Tersuai