Chapter 27: HTML Shadow DOM: പ്രൈവറ്റ് DOM സൃഷ്ടിക്കുക (Creating Private DOM with Shadow DOM)

HTML Shadow DOM എന്താണ്?

Shadow DOM എന്നത് HTML, CSS, JavaScript എന്നിവയുടെ ഒരു പ്രൈവറ്റ് കോപ്പിയാണ്, ഇത് വെബ്ബ് പേജിന്റെ പ്രധാന DOM (Document Object Model) അവസ്ഥയിൽ സ്വാധീനിക്കപ്പെടാതെ പ്രവർത്തിക്കുന്നു. ഇത് വെബ്ബ് കോമ്പോണന്റുകളുടെ ഉള്ളിലുള്ള ഇൻക്യാപ്സുലേഷൻ നൽകുകയും വേഗതയും സ്വതന്ത്രമായ ഘടകങ്ങൾ സൃഷ്ടിക്കുകയും ചെയ്യാൻ സഹായിക്കുന്നു.

Shadow DOM എന്തിനാണ് ഉപയോഗിക്കുന്നത്?

• Component Isolation: Shadow DOM ഉപയോഗിച്ചുള്ള കോമ്പോണന്റുകൾക്ക് അവരുടെ സ്റ്റൈലുകളും DOM ക്രമീകരണങ്ങളും വേർതിരിച്ച് കൈകാര്യം ചെയ്യാം.
• Encapsulation: HTML, CSS എന്നിവയിൽ ഉള്ള നിലവിലുള്ള കോഡുകൾ ഒരു പ്രൈവറ്റ് ബബിളിൽ പൂട്ടാനാകും, അതിനാൽ പേജിന്റെ മറ്റ് ഭാഗങ്ങൾ ഇതിൽ സ്വാധീനിക്കുകയില്ല.
• Custom Elements: Shadow DOM-ൽ നന്നായി പ്രവർത്തിക്കുന്നതിലൂടെ കസ്റ്റം HTML ഇലിമെന്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും.

Shadow DOM സൃഷ്ടിക്കുന്നതിന്റെ ഘടന:

code<div id="shadow-host"></div>

<script>
  const shadowHost = document.getElementById('shadow-host');
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>
      h1 {
        color: blue;
      }
    </style>
    <h1>Hello from Shadow DOM!</h1>
  `;
</script>

Example:

code<div id="shadow-container"></div>

<script>
  const container = document.getElementById('shadow-container');
  const shadow = container.attachShadow({ mode: 'open' });

  shadow.innerHTML = `
    <style>
      p {
        color: green;
      }
    </style>
    <p>Shadow DOM ലെ പാരഗ്രാഫ്!</p>
  `;
</script>

ഇവിടെ, <p> ടാഗ് DOM-ന്റെ പ്രധാന ഭാഗത്തിന്റെ CSS ഉപയോഗിച്ച് സ്വാധീനിക്കപ്പെടാതെ green നിറത്തിൽ പ്രദർശിപ്പിക്കും.

Shadow DOM-ന്റെ Modes:

• Open Mode: Shadow DOM‌ നെ JavaScript ഉപയോഗിച്ച് പുറത്തുനിന്നും access ചെയ്യാം.
• Closed Mode: Shadow DOM‌-നെ JavaScript ഉപയോഗിച്ച് access ചെയ്യാനാവില്ല.

javascriptCopy codeconst shadowRoot = element.attachShadow({ mode: 'open' }); // Open mode
const closedShadowRoot = element.attachShadow({ mode: 'closed' }); // Closed mode

Benefits of Using Shadow DOM:

1. Style Encapsulation: Shadow DOM-ൽ സൃഷ്ടിച്ച എലിമെന്റുകൾ, parent DOM-ലെ സ്റ്റൈലുകളിൽ നിന്ന് സ്വാധീനിക്കപ്പെടുകയില്ല. ഇതോടെ വെബ്ബ് കോമ്പോണന്റുകൾക്ക് സ്ഥിരതയും ഇൻക്യാപ്സുലേഷനും ലഭിക്കും.
2. DOM Isolation: Shadow DOM-ലെ എലിമെന്റുകൾ parent DOM-ൽ നിന്നും ഒറ്റപ്പെട്ടിരിക്കുന്നു, അതിനാൽ ഇവിടെയുള്ള ഏതു സ്റ്റൈലിംഗും DOM-ന്റെ മറ്റു ഭാഗങ്ങൾ ബാധിക്കില്ല.
3. Reusability: Shadow DOM-ൽ സൃഷ്ടിച്ച HTML കോമ്പോണന്റുകൾക്ക് പുനരുപയോഗം ചെയ്യാൻ കഴിയും, അതിനാൽ കോഡ് ക്ലീൻ ആകുകയും കൂടുതൽ പ്രവർത്തനക്ഷമമാകുകയും ചെയ്യും.

Creating a Custom Element with Shadow DOM:

HTML5-ൽ, കസ്റ്റം ഇലിമെന്റുകൾ Shadow DOM-ൽ സൃഷ്ടിക്കാനും, ഒരു പ്രൈവറ്റ് DOM കൂടി നൽകാനുമാകും.

code<custom-element></custom-element>

<script>
  class CustomElement extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          p {
            color: purple;
          }
        </style>
        <p>ഇത് ഒരു കസ്റ്റം ഇലിമെന്റാണ്!</p>
      `;
    }
  }
  customElements.define('custom-element', CustomElement);
</script>

Styling in Shadow DOM:

Shadow DOM-ൽ സ്റ്റൈലിംഗ് ഉൾപ്പെടുത്താൻ <style> ടാഗുകൾ ഉപയോഗിക്കാം. ഇവിടെ parent DOM-ന്റെ CSS Shadow DOM-നെ സ്വാധീനിക്കില്ല, അതിനാൽ Shadow DOM-ൽ യഥേഷ്ടം സ്റ്റൈലിംഗ് നിർണ്ണയിക്കാൻ കഴിയും.

<custom-box></custom-box>

<script>
  class CustomBox extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>
          div {
            background-color: yellow;
            padding: 20px;
            border: 2px solid black;
          }
        </style>
        <div>Shadow DOM-box content</div>
      `;
    }
  }
  customElements.define('custom-box', CustomBox);
</script>

Working with Slots in Shadow DOM:

Shadow DOM-ൽ Slots ഉപയോഗിച്ചുകൊണ്ട്, Parent DOM-ന്റെ ഉള്ളടക്കം Shadow DOM-ൽ ചില സ്ഥിതികളിൽ ഉൾപ്പെടുത്താൻ കഴിയും.

<slot-box>
  <span slot="content">Slot ഉള്ള ടൈപ്പ്!</span>
</slot-box>

<script>
  class SlotBox extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <slot name="content"></slot>
      `;
    }
  }
  customElements.define('slot-box', SlotBox);
</script>

Limitations of Shadow DOM:

1. Browser Support: Shadow DOM‌ അതിന്റെ എല്ലാ സവിശേഷതകളോടും മികച്ച രീതിയിൽ ഉപയോഗിക്കാനായി പുതിയ ബ്രൗസറുകൾ ആവശ്യമാണ്. പഴയ ബ്രൗസറുകൾ ഈ ഫീച്ചറിനെ കുറിച്ചുള്ള പിന്തുണ നൽകുന്നില്ല.
2. Closed Mode Limitations: Shadow DOM‌-ന്റെ Closed Mode JavaScript വഴി access ചെയ്യാനാവില്ല, ഇത് ഉപയോഗിക്കുമ്പോൾ ചില Additional Limitations ഉണ്ടാകും.

---

സങ്കലനം:

HTML Shadow DOM DOM ന്റെ ഒറ്റപ്പെട്ട, പ്രൈവറ്റ് ഭാഗം സൃഷ്ടിച്ച് വെബ്ബ് കോമ്പോണന്റുകൾക്ക് ഇൻക്യാപ്സുലേഷൻ നൽകുന്നു. Custom Elements, Reusable UI Components എന്നിവ സൃഷ്ടിക്കാനും അതിന്റെ സ്റ്റൈലിംഗ് DOM-നിന്റെ മറ്റ് ഭാഗങ്ങളിൽ നിന്ന് സ്വതന്ത്രമായി കൈകാര്യം ചെയ്യാനുമുള്ള പ്രാധാന്യം Shadow DOM-ലുണ്ട്.