Chapter 28: HTML Web Components: പുനരുപയോഗിക്കാവുന്ന UI ഘടകങ്ങൾ (Creating Reusable UI Components with HTML Web Components)

HTML Web Components എന്താണ്?

HTML Web Components ഒരു വെബ്ബ് ആപ്ലിക്കേഷനിൽ പുനരുപയോഗിക്കാവുന്ന, സ്വതന്ത്രമായ UI ഘടകങ്ങൾ സൃഷ്ടിക്കാൻ സഹായിക്കുന്നു. Web Components HTML, CSS, JavaScript എന്നിവയുടെ സംയോജനം ഉപയോഗിച്ച് ഒരു സവിശേഷ ഫംഗ്ഷൻ അല്ലെങ്കിൽ UI ഘടകം സൃഷ്ടിക്കുന്നു, ഇത് പേജിൽ എവിടെയും ഉപയോഗിക്കാം.

HTML Web Components-ന്റെ മൂല ഘടകങ്ങൾ:

1. Custom Elements: ബ്രൗസറുകൾക്ക് സ്വയം നിർവ്വചിക്കാവുന്ന HTML ഇലിമെന്റുകൾ സൃഷ്ടിക്കാൻ Custom Elements API ഉപയോഗിക്കുന്നു.
2. Shadow DOM: Web Components-ന്റെ ഉള്ളടക്കം (HTML, CSS) parent DOM-ന്റെ ഭാഗങ്ങളിൽ നിന്നും പ്രൈവറ്റ് ആക്കുന്നു.
3. HTML Templates: HTML കോഡ്, പുനരുപയോഗിക്കാൻ അനുയോജ്യമായവ, Template ടാഗ് ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്നു.

Custom Elements സൃഷ്ടിക്കുക:

Custom Elements API ഉപയോഗിച്ച് പുതിയ HTML ടാഗുകൾ (Custom Elements) സൃഷ്ടിക്കാം.

<my-component></my-component>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <style>
          h1 { color: red; }
        </style>
        <h1>ഞാൻ ഒരു കസ്റ്റം കോമ്പോണന്റാണ്!</h1>
      `;
    }
  }

  customElements.define('my-component', MyComponent);
</script>

Example Explanation:

• HTML: <my-component> എന്ന പുതിയ HTML ഇലിമെന്റ് സൃഷ്ടിച്ചു.
• JavaScript: Custom Elements API ഉപയോഗിച്ച് MyComponent എന്ന ക്ലാസ് സൃഷ്ടിച്ചു, അത് HTML ടാഗായ my-component-നെ നിർവ്വചിക്കുന്നു.
• Shadow DOM: this.attachShadow() ഉപയോഗിച്ച് പ്രൈവറ്റ് DOM സൃഷ്ടിച്ചു, അതിലെ ഉള്ളടക്കം Parent DOM-ൽ നിന്ന് ഒറ്റപ്പെട്ടിരിക്കുന്നു.

Benefits of Web Components:

1. Reusable UI Components: Web Components ഒരിക്കൽ സൃഷ്ടിച്ചാൽ, എവിടെയെങ്കിലും വീണ്ടും ഉപയോഗിക്കാൻ കഴിയുന്ന UI കോമ്പോണന്റുകളാണ്.
2. Encapsulation: Web Components-ൽ സൃഷ്ടിച്ച HTML, CSS, JavaScript Parent DOM-ലുള്ള മറ്റേതെങ്കിലും സ്റ്റൈലുകളിൽ നിന്നും സ്വതന്ത്രമായി പ്രവർത്തിക്കുന്നു.
3. Modularity: Web Components-ൽ ഓരോ കോമ്പോണന്റും ഒരു സ്വതന്ത്ര ഫംഗ്ഷൻ ആയി വേർതിരിക്കാൻ കഴിയും, ഇത് പേജിന്റെ സങ്കീർണ്ണത കുറയ്ക്കുന്നു.

HTML Templates with Web Components:

HTML <template> ടാഗ് ഉപയോഗിച്ച് Web Components-ൽ പുനരുപയോഗിക്കാവുന്ന HTML ഫ്രാഗ്മെന്റുകൾ സൃഷ്ടിക്കാം.

<template id="my-template">
  <style>
    h2 { color: blue; }
  </style>
  <h2>Template Content</h2>
</template>

<script>
  class MyTemplateComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('my-template');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }

  customElements.define('my-template-component', MyTemplateComponent);
</script>

<my-template-component></my-template-component>

Slots: Content Projection in Web Components:

Slots Web Components-ൽ parent DOM-ൽ നിന്നും ഉള്ളടക്കം സ്വീകരിക്കുന്നതിനുള്ള മാർഗമാണ്.

<slot-component>
  <p slot="content">This content is inside a slot!</p>
</slot-component>

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

Attributes and Properties in Web Components:

Web Components Parent DOM-ൽ നിന്നും Attributes സ്വീകരിക്കുകയും അതിന്റെ അടിസ്ഥാനത്തിൽ പ്രവർത്തിക്കയും ചെയ്യുന്നു.

<attribute-component message="Hello Web Components"></attribute-component>

<script>
  class AttributeComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <p>${this.getAttribute('message')}</p>
      `;
    }
  }
  customElements.define('attribute-component', AttributeComponent);
</script>

Web Components-നുള്ള Style Isolation:

Web Components-ൽ Shadow DOM ഉപയോഗിച്ച് Parent DOM-ലുള്ള Style Sheets Parent DOM-നെ ബാധിക്കാതെ വേർതിരിക്കാൻ കഴിയും. ഇത് UI Components-ന്റെ Styling Parent DOM-നു മുകളിലായുള്ള Styles-ൽ നിന്നും സ്വതന്ത്രമായി പ്രവർത്തിക്കാനും അതിൽ ഉയർന്ന സ്ഥിരത നൽകാനും സഹായിക്കുന്നു.

Advantages of Using Web Components:

1. Cross-Platform Compatibility: Web Components എല്ലാ ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു. ഒന്നായുള്ള UI Components വെബ്ബ് ആപ്ലിക്കേഷനുകൾ, ഡെസ്ക്ടോപ്പ് ആപ്ലിക്കേഷനുകൾ എന്നിവയിൽ ഉപയോഗിക്കാം.
2. Maintainability: Modularity കാരണം Web Components-ന്റെ കോഡ് മെയിന്റെയിൻ ചെയ്യാനും അപ്ഡേറ്റ് ചെയ്യാനും എളുപ്പമാണ്.
3. Framework Agnostic: Web Components ഒരു JavaScript framework ന്റെ അവലംബനം ഇല്ലാതെ JavaScript, HTML-ൽ നിന്ന് സൃഷ്ടിക്കാം.

Limitations of Web Components:

1. Browser Support: Web Components കൂടുതൽ ആധുനിക ബ്രൗസറുകളിൽ മാത്രം മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു. പഴയ ബ്രൗസറുകൾക്ക് പിന്തുണ കുറഞ്ഞതായിരിക്കും.
2. JavaScript Dependency: Web Components JavaScript ഉപയോഗിച്ച് മാത്രമേ പ്രവർത്തിക്കൂ, അത് JavaScript ഇന്ഫ്രാസ്ട്രക്ചർ ഉള്ള ഒരു ആപ്ലിക്കേഷൻ ആവശ്യമാണ്.

---

സങ്കലനം:

HTML Web Components Web Applications-ലും UI Components-ലും പുനരുപയോഗക്കാവുന്ന, ഇൻക്യാപ്സുലേറ്റുചെയ്ത കോമ്പോണന്റുകൾ സൃഷ്ടിക്കാൻ സഹായിക്കുന്നു. Custom Elements, Shadow DOM, HTML Templates എന്നിവയുടെ സംയോജനം സൃഷ്ടിച്ച Web Components-കൾ ഒരു സ്വതന്ത്ര ഘടന നൽകുന്നു.