Shadow DOM sa TypeScript

Articles

Ipinaliliwanag ng artikulong ito ang Shadow DOM sa TypeScript.

Maingat naming ipapaliwanag ang lahat mula sa mga pangunahing kaalaman ng Shadow DOM hanggang sa aktwal na paggamit nito, at magbibigay kami ng mga praktikal na halimbawa ng code.

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>

Detalyadong Paliwanag at Praktikal na Patnubay sa Hakbang-Hakbang para sa `Shadow DOM`

Ang Shadow DOM ay isa sa mga pangunahing bahagi ng Web Components. Lumilikha ito ng isang naka-encapsulate na DOM tree na naghihiwalay sa estilo at istruktura ng bahagi mula sa labas. Dito, magbibigay kami ng detalyadong paliwanag tungkol sa mga pangunahing kaalaman sa Shadow DOM hanggang sa mga praktikal nitong gamit, kasama ang mga halimbawa ng code na maaaring subukan.

Ano ang `Shadow DOM`?

Shadow DOM ay isang teknolohiya ng web standard na may mga sumusunod na katangian.

Encapsulation

Inihihiwalay ng Shadow DOM ang panloob na istruktura ng DOM ng isang bahagi mula sa labas. Ang ibang estilo at script ay hindi nakikialam, na nagpapabuti sa muling paggamit.
Malayang Style Scope

Ang mga estilo sa loob ng Shadow DOM ay hindi nakakaapekto sa panlabas na CSS. Gayon din, ang mga panlabas na estilo ay hindi nalalapat sa loob ng Shadow DOM.
Hiwalay na DOM Tree

Ang Shadow DOM ay umiiral bilang isang hiwalay na puno mula sa regular na DOM, na may limitadong pag-access mula sa parent DOM.

Pangunahing Paggamit ng `Shadow DOM`

Ang sumusunod na code ay ang unang halimbawa gamit ang 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`;

Ipapakita ng browser ang asul na teksto: 'Ito ay nasa loob ng Shadow DOM!'. Ang estilo ng tekstong ito ay hindi naaapektuhan ng panlabas na CSS.

Mga pangunahing hakbang ng `Shadow DOM`

Upang magamit ang Shadow DOM, gaya ng ipinapakita sa code na ito, gamitin mo ang attachShadow na metodo sa JavaScript. Narito ang mga pangunahing hakbang:.

Paglikha ng Mga Custom na Elemento Ang custom element ay isang user-defined na tag na maaari mong likhain bukod sa mga karaniwang HTML tag. Sa hakbang na ito, lumikha ka ng isang class na nag-extend ng HTMLElement, gaya ng MyElement na class, upang ihanda ang browser na kilalanin ito bilang bagong tag. Sa pamamagitan ng pagrerehistro ng nilikhang klase gamit ang customElements.define(), magagamit mo ito bilang custom na tag sa loob ng HTML.
Pagkakabit ng Shadow DOM Sa pagpapatupad ng this.attachShadow() sa loob ng custom element, maaaring kang lumikha ng Shadow DOM.
Pagdaragdag ng HTML at CSS sa Loob ng Shadow DOM Sa loob ng Shadow DOM, maaari kang magtakda ng sarili mong istruktura ng HTML at mga estilo. Halimbawa, sa paglalagay ng HTML at CSS sa innerHTML, maaari mong gawin itong may sariling anyo at pag-uugali na hindi naaapektuhan ng panlabas na CSS o HTML. Pinapayagan ka nitong lumikha ng mga encapsulated na bahagi (components).

Mga mode ng `Shadow DOM`: `open` at `closed`

Ang Shadow DOM ay may dalawang mode: open at closed.

Open mode: Ang shadowRoot na nakakabit sa Shadow DOM ay maaaring ma-access sa labas.
Closed mode: Ang shadowRoot na nakakabit sa Shadow DOM ay hindi maaaring ma-access sa labas.

Nasa ibaba ang isang halimbawa ng code na nagpapakita ng mga pagkakaiba sa pagitan ng dalawang 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が出力される

Ang pagpili ng closed mode ay ginagawang hindi ma-access ang shadowRoot property.

Pag-enkapsula ng estilo gamit ang `Shadow DOM`

Gamit ang Shadow DOM, maaari mong ganap na i-enkapsula ang mga estilo sa loob ng iyong mga komponent.

Ang sumusunod na halimbawa ay nagpapakita ng paghihiwalay ng mga global na estilo at mga estilo sa loob ng 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`;

Ang mga p na elemento sa loob ng Shadow DOM ay hindi naapektuhan ng mga global na estilo at may sariling natatanging mga estilo na inilalapat.

Praktikal na halimbawa ng `Shadow DOM`: Custom Tooltip

Susunod, ipapakilala namin ang isang halimbawa ng paggawa ng custom tooltip gamit ang 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`;

Ang code na ito ay lumilikha ng isang custom tooltip at nagpapakita ng styled tooltip kapag naka-hover.

Buod

Ang Shadow DOM ay isang mahalagang teknolohiya para sa mga Web Component, nagbibigay ito ng nai-enkapsulang DOM at estilo. Dito, tinalakay namin ang mga pangunahing kaalaman sa Shadow DOM, ang paggamit nito, pagkakaiba sa mga mode, pag-enkapsula ng estilo, at mga praktikal na halimbawa. Sa paggamit ng mga ito, makakagawa ka ng mga reusable at matibay na component.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Klase na Ginagamit para sa Manipulasyon ng DOM/Pangangasiwa ng Kaganapan sa TypeScript

Shadow DOM sa TypeScript

YouTube Video

Detalyadong Paliwanag at Praktikal na Patnubay sa Hakbang-Hakbang para sa Shadow DOM

Ano ang Shadow DOM?

Pangunahing Paggamit ng Shadow DOM

Mga pangunahing hakbang ng Shadow DOM

Mga mode ng Shadow DOM: open at closed

Pag-enkapsula ng estilo gamit ang Shadow DOM

Praktikal na halimbawa ng Shadow DOM: Custom Tooltip

Buod

YouTube Video

Detalyadong Paliwanag at Praktikal na Patnubay sa Hakbang-Hakbang para sa `Shadow DOM`

Ano ang `Shadow DOM`?

Pangunahing Paggamit ng `Shadow DOM`

Mga pangunahing hakbang ng `Shadow DOM`

Mga mode ng `Shadow DOM`: `open` at `closed`

Pag-enkapsula ng estilo gamit ang `Shadow DOM`

Praktikal na halimbawa ng `Shadow DOM`: Custom Tooltip