Shadow DOM dalam TypeScript

Articles

Artikel ini menjelaskan tentang Shadow DOM dalam TypeScript.

Kami akan menjelaskan secara rinci segala sesuatu mulai dari dasar-dasar Shadow DOM hingga penggunaannya dalam praktik, serta menyediakan contoh kode langsung.

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 Rinci dan Panduan Langkah demi Langkah Praktis untuk `Shadow DOM`

Shadow DOM adalah salah satu komponen utama dari Web Components. Ini menciptakan struktur DOM terenkapsulasi yang memisahkan gaya dan struktur komponen dari bagian luar. Di sini, kami akan memberikan penjelasan rinci tentang dasar-dasar Shadow DOM hingga kasus penggunaannya secara praktis, disertai dengan kode contoh yang dapat dicoba langsung.

Apa itu `Shadow DOM`?

Shadow DOM adalah teknologi standar web dengan karakteristik berikut.

Enkapsulasi

Shadow DOM memisahkan struktur DOM internal komponen dari lingkungan luar. Gaya dan skrip lain tidak mengganggu, sehingga meningkatkan kemampuan penggunaan ulang.
Ruang Lingkup Gaya Independen

Gaya di dalam Shadow DOM tidak memengaruhi CSS eksternal. Demikian pula, gaya eksternal tidak berlaku di dalam Shadow DOM.
Struktur DOM Terisolasi

Shadow DOM ada sebagai pohon terpisah dari DOM reguler, dengan akses terbatas dari DOM induk.

Penggunaan Dasar `Shadow DOM`

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

Browser akan menampilkan teks biru: 'Ini berada di dalam Shadow DOM!'. Gaya teks ini tidak terpengaruh oleh CSS eksternal.

Langkah dasar dari `Shadow DOM`

Untuk menggunakan Shadow DOM, seperti yang ditunjukkan dalam kode ini, Anda menggunakan metode attachShadow di JavaScript. Berikut adalah langkah-langkah dasarnya:.

Membuat Elemen Kustom Elemen kustom adalah tag yang didefinisikan pengguna dan dapat Anda buat selain tag HTML standar. Pada langkah ini, Anda membuat kelas yang mewarisi HTMLElement, seperti kelas MyElement, sehingga browser dapat mengenalinya sebagai tag baru. Dengan mendaftarkan kelas yang telah dibuat memakai customElements.define(), Anda bisa menggunakannya sebagai tag kustom di dalam HTML.
Melampirkan Shadow DOM Dengan menjalankan this.attachShadow() di dalam elemen kustom, Anda dapat membuat Shadow DOM.
Menambahkan HTML dan CSS di Dalam Shadow DOM Di dalam Shadow DOM, Anda bisa menentukan struktur HTML dan gaya (CSS) Anda sendiri. Misalnya, dengan menetapkan HTML dan CSS pada innerHTML, Anda dapat memberikannya tampilan dan perilaku yang independen tanpa terpengaruh oleh CSS atau HTML eksternal. Hal ini memungkinkan Anda membuat komponen yang terenkapsulasi.

Mode `Shadow DOM`: `open` dan `closed`

Shadow DOM memiliki dua mode: open dan closed.

Mode terbuka: shadowRoot yang terhubung ke Shadow DOM dapat diakses dari luar.
Mode tertutup: shadowRoot yang terhubung ke Shadow DOM tidak dapat diakses dari luar.

Di bawah ini adalah contoh kode yang menunjukkan perbedaan antara dua mode.

 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 mode closed membuat properti shadowRoot tidak dapat diakses.

Enkapsulasi gaya menggunakan `Shadow DOM`

Dengan menggunakan Shadow DOM, Anda dapat sepenuhnya mengenkapsulasi gaya di dalam komponen Anda.

Contoh berikut menunjukkan pemisahan antara gaya global dan gaya di 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 terpengaruh oleh gaya global dan memiliki gaya unik mereka sendiri.

Contoh praktis `Shadow DOM`: Tooltip Kustom

Selanjutnya, kami memperkenalkan contoh pembuatan tooltip kustom 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`;

Kode ini membuat tooltip kustom dan menampilkan tooltip dengan gaya saat di-hover.

Ringkasan

Shadow DOM adalah teknologi penting untuk Web Components, yang memberikan DOM terenkapsulasi dan cakupan gaya. Di sini, kami membahas dasar-dasar Shadow DOM, penggunaannya, perbedaan mode, enkapsulasi gaya, dan contoh praktis. Dengan memanfaatkan ini, Anda dapat membangun komponen yang dapat digunakan kembali dan kokoh.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Kelas yang Digunakan untuk Manipulasi DOM/Penanganan Acara dalam TypeScript

Shadow DOM dalam TypeScript

YouTube Video

Penjelasan Rinci dan Panduan Langkah demi Langkah Praktis untuk Shadow DOM

Apa itu Shadow DOM?

Penggunaan Dasar Shadow DOM

Langkah dasar dari Shadow DOM

Mode Shadow DOM: open dan closed

Enkapsulasi gaya menggunakan Shadow DOM

Contoh praktis Shadow DOM: Tooltip Kustom

Ringkasan

YouTube Video

Penjelasan Rinci dan Panduan Langkah demi Langkah Praktis untuk `Shadow DOM`

Apa itu `Shadow DOM`?

Penggunaan Dasar `Shadow DOM`

Langkah dasar dari `Shadow DOM`

Mode `Shadow DOM`: `open` dan `closed`

Enkapsulasi gaya menggunakan `Shadow DOM`

Contoh praktis `Shadow DOM`: Tooltip Kustom