Articles
Panimula sa JavaScript
Ano ang Shadow DOM?

Ano ang Shadow DOM?

Ipinaliliwanag ng artikulong ito kung ano ang Shadow DOM.

YouTube Video

Pag-unawa sa Shadow DOM

Ang Shadow DOM ay isang makapangyarihang tampok ng pamantayan ng Web Components na nagbibigay-daan sa encapsulation ng mga estilo at istruktura ng DOM sa loob ng mga komponent. Pinipigilan ng tampok na ito ang pagkakaroon ng interference sa pagitan ng mga estilo at script ng mga komponent at ng pangunahing dokumento.

Ano ang Shadow DOM?

Nagbibigay ang Shadow DOM ng paraan upang makagawa ng scoped na DOM tree na nauugnay sa isang regular na DOM element. Ang shadow tree na ito ay hiwalay sa kabuuang dokumento, kung saan ang mga panlabas na estilo at script ay hindi nakakaimpluwensya rito, at ang mga panloob na estilo at script nito ay hindi rin tumatagas palabas.

Halimbawa, kung gagawa ka ng isang custom na button component gamit ang Shadow DOM, ang mga estilo nito ay hindi makakaapekto sa ibang mga elemento sa pahina. Sa parehong paraan, ang mga elemento na may parehong pangalan ng klase ay hindi magkakaroon ng salungatan.

Mga Benepisyo ng Shadow DOM

  1. Encapsulation: Pinaghihiwalay ng Shadow DOM ang mga estilo at functionality, na pumipigil sa mga salungatan sa mga global na estilo at script.

  2. Reusability: Ang mga komponent na ginawa gamit ang Shadow DOM ay maaaring magamit muli sa iba't ibang proyekto nang hindi nangangamba tungkol sa mga salungatan sa estilo.

  3. Maintainability: Pinapayagan ng encapsulation ang mga komponent na maging self-contained sa usapin ng lohika at mga estilo, na nagpapadali sa pag-debug at pagpapanatili.

Paglikha ng Shadow DOM

Upang magamit ang Shadow DOM, kailangan mong mag-attach ng shadow root sa isang elemento ng HTML. Narito ang isang simpleng halimbawa:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Paliwanag

  1. Host Element: Isang regular na DOM element kung saan naka-attach ang shadow root (sa kasong ito #shadow-host).

  2. Shadow Root: Ang ugat ng shadow tree na nilikha gamit ang attachShadow.

  3. Mode: Sa open mode, ang panlabas na JavaScript ay maaaring ma-access ang shadow root sa pamamagitan ng element.shadowRoot. Sa kabilang banda, ang closed mode ay hindi nagpapahintulot ng pag-access.

Pag-istilo sa loob ng Shadow DOM

Ang Shadow DOM ay may sarili nitong saklaw ng estilo. Ang mga istilong tinukoy sa loob ng shadow tree ay naaangkop lamang sa mga elemento sa loob ng puno na iyon. Narito ang isang halimbawa:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Kahit na may mga nagpapatunggal na istilo sa pangunahing dokumento, ang mga talata sa loob ng shadow tree ay nananatiling hindi apektado:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Ang mga talata sa loob ng Shadow DOM ay nananatiling berde, habang ang mga panlabas na talata ay pula.

Mga kaganapan sa loob ng Shadow DOM

Ang mga kaganapan sa loob ng Shadow DOM ay katulad ng regular na mga kaganapan sa DOM ngunit maaaring kumilos nang naiiba pagdating sa pagpapalaganap dahil sa encapsulation. Ang mga kaganapan na nagaganap sa loob ng shadow tree ay maaaring umakyat patungo sa host element ngunit hindi direktang umakyat sa buong dokumento.

Narito ang isang halimbawa:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Kapag na-click ang button, parehong na-trigger ang mga listener, na nagpapakita ng pag-uugali ng event bubbling.

Slots: Pamamahagi ng nilalaman ng Light DOM

Ang mga slot ay nagbibigay-daan sa iyo upang ipakita ang nilalaman mula sa Light DOM patungo sa Shadow DOM. Narito ang isang halimbawa:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

Sa pangunahing dokumento, maaari mong gawin ang sumusunod:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Ipinapakita ng mga elemento ng slot sa loob ng Shadow DOM ang nilalaman ng Light DOM na may katugmang slot attribute.

Konklusyon

Ang Shadow DOM ay isang mahalagang kasangkapan sa paggawa ng matibay, maaring magamit muli, at maintainable na mga web component. Sa pamamagitan ng pag-encapsulate ng mga estilo at functionality, nababawasan nito ang posibilidad ng mga tunggalian at pinapasimple ang pamamahala ng codebase.

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

JavaScript at HTML