HTML-CSS আর JavaScript-এর মিলন — DOM, template আর Web Components

১ · তিন ভাষার সেতু — DOM আসলে কী

একটি নতুন বাড়ির কথা ভাবুন। ইট-রড-ঢালাই হলো কাঠামো — সেটি HTML. দেয়ালের রং, টাইলস, পর্দা — সেটি CSS. আর বিদ্যুতের সুইচ, যা টিপলে বাতি জ্বলে, ফ্যান ঘোরে — সেটি JavaScript. এই কোর্সের একান্নটি পর্ব ধরে আমরা কাঠামো আর রং নিয়েই কাজ করেছি। এবার দেখব সুইচের তার কোথায় গিয়ে লাগে।

উত্তর হলো DOM (Document Object Model) — ব্রাউজারের বানানো একটি মডেল। পর্ব ০১-এ দেখেছিলেন, ব্রাউজার HTML ফাইল পড়ে মেমরিতে একটি গাছ বানায়; পর্ব ০৩-এ দেখেছিলেন, সেই গাছের প্রতিটি element একটি node, যার parent, child আর sibling আছে। মনে রাখার মতো মূল কথা হলো: ব্রাউজার আপনার HTML ফাইল দেখায় না, দেখায় DOM. ফাইলটি একবার পড়া হয়ে গেলে কাজ শেষ; এরপর পর্দায় যা আছে, তা DOM-এর ছবি।

CSS-ও আসলে DOM-কেই সাজায়, ফাইলকে নয়। আর JavaScript DOM-এ হাত দিতে পারে — নতুন element যোগ, লেখা বদল, class বসানো। প্রতিটি বদলের পর ব্রাউজার নিজে থেকেই হিসাব করে কোন CSS নিয়ম এখন খাটে, তারপর দরকার হলে লেআউট আর রং নতুন করে আঁকে। নিচে “পরে” চেপে পুরো পথটি দেখুন:

<div class="card">
  <h3>৩০ জিবি প্যাকেজ</h3>
  <button>বাছাই করুন</button>
</div>

div class="card"
├── h3 → "৩০ জিবি প্যাকেজ"
└── button → "বাছাই করুন"

card.classList.add('is-selected');

div class="card is-selected"
├── h3
└── button

.card.is-selected { background: #ccfbf1; }
↑ এই নিয়ম এখন খাটে → নতুন রং আঁকা হলো

২ · element খোঁজা আর class বদলানো — querySelector ও classList

DOM-এ কিছু বদলাতে হলে আগে element-টিকে হাতে পেতে হয়। মজার খবর হলো, এর জন্য নতুন কোনো ভাষা শিখতে হবে না — আপনার জানা CSS selector-ই চাবি। document.querySelector('#pkg') পাতার প্রথম যে element-টি #pkg selector-এ মেলে, সেটি ফেরত দেয় (না পেলে null); querySelectorAll('.card') দেয় মেলে যাওয়া সবগুলো। পর্ব ১৭ আর ৩৪-এ শেখা প্রতিটি selector — attribute, combinator, :has() — এখানে কাজ করে, কারণ ব্রাউজার CSS-এর একই selector ইঞ্জিন দিয়ে এগুলো চালায়।

হাতে পেলে সবচেয়ে কাজের হাতিয়ার classList: add(), remove(), contains() আর toggle(). toggle('x') class থাকলে সরায়, না থাকলে বসায়, আর ফেরত দেয় শেষ অবস্থা — true বা false. ছোট একটি উদাহরণে দেখুন — একটি মোবাইল ইন্টারনেট প্যাকেজ বাছাইয়ের কার্ড:

<style>
  .card { max-width: 280px; padding: 12px 16px; border: 2px solid #94a3b8; border-radius: 12px; }
  .card.is-selected { border-color: #0f766e; background: #ccfbf1; }
</style>
<div class="card" id="pkg">
  <h3>ইন্টারনেট প্যাকেজ — ৩০ জিবি</h3>
  <p>মেয়াদ ৩০ দিন · ৳৫০০ (উদাহরণ)</p>
  <button type="button" id="pick">এটি বাছাই করুন</button>
</div>
<script>
  const card = document.querySelector('#pkg');
  const btn = document.querySelector('#pick');
  btn.addEventListener('click', () => {
    const on = card.classList.toggle('is-selected');
    btn.textContent = on ? 'বাছাই বাতিল করুন' : 'এটি বাছাই করুন';
    console.log('class এখন:', card.className);
  });
</script>

যে কয়টি DOM-কাজ HTML-CSS ডেভেলপারের রোজ লাগে

৩ · “CSS চেহারার, JS অবস্থার” — data-* আর aria-* দিয়ে CSS চালানো

২০০৬ সালে jQuery আসার পর এক দশক ধরে ওয়েবে একটি অভ্যাস খুব চলেছে: JavaScript দিয়ে সরাসরি চেহারা বসানো — el.style.display = 'block', el.style.background = 'red'. দেখতে সহজ, কিন্তু এতে তিনটি বড় সমস্যা হয়:

• CSS হেরে যায়। el.style আসলে একটি inline style, যার specificity যেকোনো selector-এর চেয়ে বেশি (পর্ব ১৮)। পরে CSS ফাইলে dark mode বা মোবাইলের জন্য রং বদলাতে চাইলে !important ছাড়া উপায় থাকে না।
• নকশা দুই জায়গায় ছড়িয়ে পড়ে। ডিজাইনার রং বদলাতে বললে CSS আর JavaScript — দুই ফাইলেই খুঁজতে হয়। Separation of concerns-এর নীতি ভেঙে যায়।
• Screen reader কিছুই জানে না। একটি মেনু পর্দায় খুলল, কিন্তু যিনি চোখে দেখেন না, তাঁর কাছে “খোলা” না “বন্ধ” — সেই তথ্য কোথাও লেখা নেই।

সমাধানের নীতিটি এক লাইনের: JavaScript শুধু অবস্থা (state) বদলাবে; সেই অবস্থা দেখে চেহারা ঠিক করবে CSS. অবস্থা লেখার তিনটি জায়গা আছে — একটি class (is-open), একটি data-* attribute (data-state="open"), আর যেখানে অবস্থাটি অ্যাক্সেসিবিলিটির জন্যও জরুরি, সেখানে একটি ARIA state. শেষেরটি সবচেয়ে শক্তিশালী, কারণ একই attribute screen reader-কেও খবর দেয় আর CSS-এর attribute selector-কেও। একটি তথ্য, দুই শ্রোতা।

<style>
  .menu { display: none; margin: 8px 0; padding: 8px 32px; background: #f1f5f9; }
  [aria-expanded="true"] + .menu { display: block; }
  button[aria-expanded="true"] { background: #1e3a8a; color: white; }
  .arrow { display: inline-block; transition: rotate .2s; }
  [aria-expanded="true"] .arrow { rotate: 180deg; }
</style>
<nav aria-label="প্রধান মেনু">
  <button type="button" aria-expanded="false" aria-controls="m1">
    মেনু <span class="arrow" aria-hidden="true">▼</span>
  </button>
  <ul class="menu" id="m1">
    <li><a href="#home">হোম</a></li>
    <li><a href="#courses">কোর্স</a></li>
    <li><a href="#contact">যোগাযোগ</a></li>
  </ul>
</nav>
<script>
  const toggle = document.querySelector('[aria-expanded]');
  toggle.addEventListener('click', () => {
    const open = toggle.getAttribute('aria-expanded') === 'true';
    toggle.setAttribute('aria-expanded', String(!open));
    console.log('aria-expanded =', toggle.getAttribute('aria-expanded'));
  });
</script>

একটি click-এর পর ঠিক কী কী ঘটে, ধাপে ধাপে দেখুন:

দুটি সতর্কতা। প্রথমত, পর্ব ১১-এর কথা মনে রাখুন: খোলা-বন্ধের সাধারণ বাক্সের জন্য <details>, ভাসমান মেনুর জন্য popover আর invoker commands এখন JavaScript ছাড়াই কাজ করে। নিজে স্ক্রিপ্ট লেখার আগে দেখুন HTML নিজেই কাজটি পারে কি না — এটাই ARIA-র প্রথম নিয়মের (পর্ব ১২) আত্মা। দ্বিতীয়ত, ARIA state শুধু তখনই ব্যবহার করুন যখন তার অর্থ সত্যিই খাটে: খোলা-বন্ধে aria-expanded, চাপা-না-চাপা টগলে aria-pressed, ট্যাবে aria-selected. নিছক সাজের অবস্থার জন্য (যেমন “এই কার্ডটি হাইলাইট”) data-state বা class-ই ঠিক।

৪ · JavaScript থেকে CSS variable, আর event-এর ছোট পরিচয়

কখনো অবস্থাটি “খোলা/বন্ধ”-এর মতো দুই ভাগে ভাগ করা যায় না — একটি সংখ্যা, যেমন স্লাইডারের মান বা স্ক্রলের পরিমাণ। তখন class দিয়ে কাজ হয় না। পর্ব ৩৩-এ দেখেছিলেন এর সমাধান: JavaScript শুধু একটি CSS variable-এর মান বদলাবে — el.style.setProperty('--hue', 200) — আর সেই variable কোথায় কীভাবে ব্যবহার হবে, তা ঠিক করবে CSS. পড়তে চাইলে getComputedStyle(el).getPropertyValue('--hue').

এখানে নীতিটা একটু সূক্ষ্ম: setProperty-ও আসলে inline style বসায়। কিন্তু আমরা চেহারা (background, color) বসাচ্ছি না, বসাচ্ছি একটি কাঁচা সংখ্যা। সেই সংখ্যা দিয়ে কী রং হবে, কতটা গাঢ় হবে, dark mode-এ কী হবে — সব সিদ্ধান্ত এখনো CSS-এর হাতে।

<style>
  :root { --hue: 160; }
  .badge {
    display: inline-block; padding: 12px 20px; border-radius: 999px;
    background: hsl(var(--hue) 70% 88%);
    color: hsl(var(--hue) 80% 20%);
    border: 2px solid hsl(var(--hue) 60% 40%);
  }
</style>
<label for="hue">রঙের কোণ (hue):</label>
<input type="range" id="hue" min="0" max="360" value="160">
<output id="out" for="hue">160</output>
<p><span class="badge">ABCL TECH শিক্ষার্থী</span></p>
<script>
  const rootEl = document.documentElement;
  const slider = document.querySelector('#hue');
  slider.addEventListener('input', () => {
    rootEl.style.setProperty('--hue', slider.value);
    document.querySelector('#out').textContent = slider.value;
  });
  const start = getComputedStyle(rootEl).getPropertyValue('--hue');
  console.log('শুরুতে --hue =', start.trim());
</script>

Event — ব্রাউজারের “ঘটনা ঘটেছে” সংকেত

উপরের দুটি উদাহরণেই একটি লাইন ছিল: addEventListener('click', …). ব্রাউজার প্রতিটি ঘটনার — ক্লিক, টাইপ, স্ক্রল, ফর্ম জমা — একটি event পাঠায়, আর আপনি বলে রাখেন “এই ঘটনা ঘটলে এই ফাংশন চালাও।” HTML-CSS ডেভেলপারের জন্য কয়েকটি event-ই যথেষ্ট:

• click — বোতাম বা লিংক চাপলে; আসল বোতামে কি-বোর্ডের Enter/Space-ও এর মধ্যে পড়ে।
• input — ইনপুট ঘরের মান প্রতিবার বদলালে (প্রতিটি অক্ষরে); change — মান বদলানো “শেষ” হলে।
• submit — ফর্ম জমা দেওয়ার সময় (পর্ব ০৮-০৯-এর built-in validation পাস করার পর)।
• keydown — নির্দিষ্ট কি চাপলে, যেমন Escape দিয়ে কিছু বন্ধ করা।

পুরোনো টিউটোরিয়ালে প্রায়ই দেখবেন HTML-এর ভেতরেই <button onclick="…">. এটি এখনো চলে, কিন্তু আধুনিক রীতি হলো স্ক্রিপ্টে addEventListener — HTML থাকে পরিষ্কার, একই event-এ একাধিক কাজ জোড়া যায়, আর কঠোর Content Security Policy (যা inline স্ক্রিপ্ট আটকায়) থাকলেও ভাঙে না। Event কীভাবে DOM-গাছ বেয়ে ওপরে ওঠে (bubbling), কীভাবে একটি listener দিয়ে শত element সামলানো যায় (delegation) — এসব JavaScript কোর্সের event-এর পর্বে।

৫ · template — ছাঁচে ঢালা HTML

একটি অনলাইন দোকানে ধরুন ৫০টি পণ্যের কার্ড দেখাতে হবে, আর তালিকাটি আসছে সার্ভার থেকে। প্রতিটি কার্ডের কাঠামো এক — নাম, দাম, ছবি — শুধু লেখা আলাদা। JavaScript-এর ভেতরে লম্বা স্ট্রিং জোড়া দিয়ে HTML বানানো অগোছালো, ভুলপ্রবণ, আর innerHTML-এর কারণে বিপজ্জনক। HTML-এর নিজস্ব সমাধান <template>.

পিঠা বানানোর ছাঁচের কথা ভাবুন। ছাঁচ নিজে পিঠা নয়, খাওয়াও যায় না — কিন্তু প্রতিবার চাল-গুঁড়া ঢাললে একই নকশার পিঠা বেরোয়। <template>-এর ভেতরের HTML ব্রাউজার পার্স করে ঠিকই, কিন্তু পাতায় দেখায় না, ভেতরের ছবি লোড করে না, স্ক্রিপ্ট চালায় না। পুরো জিনিসটি থাকে template.content-এ, একটি DocumentFragment হয়ে — DOM-এর একটি আলগা টুকরো, যা এখনো কোনো পাতার অংশ নয়।

<style>
  #list { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 320px; }
  .item { display: flex; justify-content: space-between; padding: 8px 12px;
          border: 1px solid #cbd5e1; border-radius: 8px; }
  .price { font-weight: bold; color: #0f766e; }
</style>
<h3>আজকের বাজারদর (উদাহরণ)</h3>
<ul id="list"></ul>
<template id="row">
  <li class="item"><span class="label"></span><span class="price"></span></li>
</template>
<script>
  const rows = [['চাল, ১ কেজি', '৳৭৫'], ['মসুর ডাল, ১ কেজি', '৳১১০'], ['আলু, ১ কেজি', '৳৪০']];
  const tpl = document.querySelector('#row');
  for (const [label, cost] of rows) {
    const copy = tpl.content.cloneNode(true);
    copy.querySelector('.label').textContent = label;
    copy.querySelector('.price').textContent = cost;
    document.querySelector('#list').append(copy);
  }
  console.log('template-এর ভেতরে li:', tpl.content.children.length,
              '| পাতায় li:', document.querySelectorAll('#list li').length);
</script>

#document-fragment  (পাতার বাইরে)
└── li.item
    ├── span.label  (খালি)
    └── span.price  (খালি)
document.querySelector('.label') → null

copy = #document-fragment
└── li.item
    ├── span.label
    └── span.price
true = ভেতরের সব শাখাসহ গভীর কপি

copy
└── li.item
    ├── span.label → "চাল, ১ কেজি"
    └── span.price → "৳৭৫"

ul#list
└── li.item  ← এখন দেখা যায়, CSS খাটে
copy → (খালি — সন্তানেরা সরে গেছে)

৬ · Custom element — নিজের HTML ট্যাগ

এ পর্যন্ত আমরা ব্রাউজারের দেওয়া element নিয়ে কাজ করেছি। Web Components হলো ব্রাউজারের নিজস্ব কয়েকটি প্রযুক্তির একটি দল, যা দিয়ে আপনি নিজের element বানাতে পারেন: <user-card>, <bn-number>, <price-tag>. দলের তিন সদস্য:

তিনটি আলাদাভাবেও ব্যবহার করা যায় — shadow ছাড়া custom element, কিংবা custom element ছাড়া template. শুরু করা যাক নামের নিয়ম দিয়ে। একটি custom element-এর নাম:

• অবশ্যই একটি হাইফেন (-) থাকবে: user-card ঠিক, usercard ভুল।
• শুরু হবে ছোট হাতের ইংরেজি অক্ষর দিয়ে, আর বড় হাতের ইংরেজি অক্ষর থাকবে না: UserCard বা 1-card চলবে না।
• কয়েকটি নাম সংরক্ষিত, কারণ SVG আর MathML আগেই নিয়েছে — যেমন font-face, annotation-xml.

হাইফেনের নিয়মটি একটি চুক্তি: HTML নিজে কখনো হাইফেনওয়ালা নামের element যোগ করবে না। তাই আপনার আজকের <tab-list> ভবিষ্যতে HTML-এর কোনো নতুন ট্যাগের সাথে ধাক্কা খাবে না। ব্রাউজারও নামটি দেখেই আচরণ বদলায় — নিচের ছোট স্ক্রিপ্টে দেখুন:

// নামে হাইফেন থাকলে ব্রাউজার ধরে নেয়: "এটি হয়তো পরে define হবে"
const a = document.createElement('user-card');
const b = document.createElement('usercard');
console.log('user-card  ->', a.constructor.name);
console.log('usercard   ->', b.constructor.name);

class UserCard extends HTMLElement {}
customElements.define('user-card', UserCard);
console.log('after define ->', document.createElement('user-card').constructor.name);

try { customElements.define('usercard', class extends HTMLElement {}); }
catch (e) { console.log('usercard define ->', e.name); }
try { customElements.define('user-card', class extends HTMLElement {}); }
catch (e) { console.log('second define ->', e.name); }

Lifecycle callback — element-এর জীবনের মুহূর্তগুলো

Custom element-এর class-এ কয়েকটি বিশেষ নামের method লিখলে ব্রাউজার নিজেই ঠিক সময়ে সেগুলো ডাকে; এদের বলে lifecycle callback:

• constructor() — element তৈরি বা “উন্নীত” (upgrade) হওয়ার মুহূর্তে। শুরুতে super() বাধ্যতামূলক; এখানে attribute পড়া বা element-এ সরাসরি সন্তান যোগ করা উচিত নয় (তবে নিজের shadow root বানিয়ে তার ভেতরে কাঠামো বসানো চলে — অংশ ৭-এর উদাহরণের মতো)।
• connectedCallback() — element পাতায় বসলে। বেশিরভাগ কাজ — event জোড়া, ভেতরের কাঠামো সাজানো — এখানেই।
• disconnectedCallback() — পাতা থেকে সরালে; টাইমার বা বাইরের listener পরিষ্কারের জায়গা।
• attributeChangedCallback(name, old, new) — static observedAttributes-এ লেখা কোনো attribute বদলালে।

<p>মোট ভর্তি: <bn-number value="1250"></bn-number> জন</p>
<button type="button" id="add">আরও একজন ভর্তি</button>
<script>
  class BnNumber extends HTMLElement {
    static observedAttributes = ['value'];
    constructor() { super(); console.log('constructor'); }
    attributeChangedCallback(attr, oldV, newV) {
      console.log('attributeChanged:', attr, oldV, '->', newV);
      this.render();
    }
    connectedCallback() { console.log('connectedCallback — পাতায় বসল'); }
    render() {
      const bn = '০১২৩৪৫৬৭৮৯';
      this.textContent = (this.getAttribute('value') || '').replace(/[0-9]/g, d => bn[d]);
    }
  }
  customElements.define('bn-number', BnNumber);
  document.querySelector('#add').addEventListener('click', () => {
    const el = document.querySelector('bn-number');
    el.setAttribute('value', Number(el.getAttribute('value')) + 1);
  });
</script>

পাতায় আগে থেকে থাকা element-এর গল্পটা একটু মজার। Parser যখন <bn-number> পায়, তখনো define হয়নি — element-টি একটি সাধারণ, “অসংজ্ঞায়িত” element হয়ে বসে থাকে। Define হওয়ামাত্র ব্রাউজার তাকে upgrade করে। ধাপগুলো দেখুন:

1<bn-number value="1250"></bn-number>2<script>3class BnNumber extends HTMLElement {4  static observedAttributes = ['value'];5  constructor() { super(); }6  attributeChangedCallback(n, o, v) { … }7  connectedCallback() { … }8  disconnectedCallback() { … }9}10customElements.define('bn-number', BnNumber);11el.setAttribute('value', '1251');12el.remove();

৭ · Shadow DOM — CSS-এর দেয়াল আর দেয়ালের দরজা

পর্ব ৪৬-এ দেখেছিলেন, বড় প্রজেক্টে CSS-এর সবচেয়ে বড় মাথাব্যথা হলো সংঘর্ষ — আপনার .title আর অন্য কারও .title একে অপরের নকশা ভাঙে। BEM-এর মতো নামকরণ একটি ভদ্রলোকের চুক্তি; @scope (পর্ব ৩৭) একটি সীমানা। Shadow DOM হলো সত্যিকারের দেয়াল।

this.attachShadow({ mode: 'open' }) লিখলে element-টি একটি shadow host হয়ে যায়, আর তার সাথে জোড়া লাগে একটি shadow root — একটি আলাদা DOM-গাছ, যা পর্দায় element-এর ভেতরে আঁকা হয়, কিন্তু পাতার সাধারণ গাছের অংশ নয়। পাতার নিজের গাছকে তখন বলা হয় light DOM. দেয়ালের নিয়ম:

• পাতার CSS selector ভেতরে ঢোকে না: পাতায় p { color: crimson } থাকলেও shadow-এর ভেতরের <p> লাল হয় না।
• ভেতরের CSS বাইরে যায় না: shadow-এর ভেতরের p { … } পাতার অন্য কোনো <p>-কে ছোঁয় না।
• পাতার querySelector-ও ভেতরে পৌঁছায় না (তবে open হলে el.shadowRoot দিয়ে ইচ্ছা করে ঢোকা যায়)।

কিন্তু পুরো বন্ধ দেয়াল কাজের নয় — বাইরের পাতা অন্তত ফন্ট আর ব্র্যান্ডের রং বলে দিতে চায়। তাই দেয়ালে তিনটি দরজা রাখা আছে:

ভেতর থেকে host element-কে সাজানোর selector হলো :host (আর শর্তসহ :host(.compact) লেখা যায়)। মনে রাখুন, custom element ডিফল্টে display: inline, তাই কার্ডের মতো জিনিসে :host { display: block } প্রায় সবসময় লাগে।

<style>
  /* পাতার CSS */
  body { font-family: system-ui, sans-serif; }
  p { color: crimson; font-weight: bold; }
  price-card { --accent: #7c3aed; }
  price-card::part(price) { font-size: 1.6em; }
</style>
<p>পাতার সাধারণ অনুচ্ছেদ — লাল আর মোটা।</p>
<price-card></price-card>
<script>
  class PriceCard extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' }).innerHTML = `
        <style>
          :host { display: block; max-width: 260px; margin-top: 12px; padding: 4px 16px;
                  border: 2px solid var(--accent, teal); border-radius: 12px; }
          [part="price"] { color: var(--accent, teal); }
        </style>
        <p>Shadow-এর ভেতরের অনুচ্ছেদ</p>
        <p part="price">৳১,২০০</p>`;
    }
  }
  customElements.define('price-card', PriceCard);
  console.log('বাইরের p:', document.querySelectorAll('p').length, 'টি — ভেতরেরগুলো গোনায় নেই');
</script>

৮ · slot আর declarative shadow DOM — JavaScript ছাড়াই shadow

একটি component-এর কাঠামো আপনার, কিন্তু ভেতরের লেখা দেবেন ব্যবহারকারী — যেমন একটি প্রোফাইল কার্ডে নাম আর পেশা। এই “ফাঁকা ঘর”-এর নাম <slot>. Shadow-এর ভেতরে <slot name="title"> রাখলে, host-এর ভেতরে slot="title" লেখা যে element আছে, সেটি পর্দায় ওই জায়গায় দেখা যায়। নাম ছাড়া <slot> নেয় বাকি সবকিছু, আর slot-এর ভেতরের লেখা হলো fallback — বাইরে থেকে কিছু না এলে সেটি দেখায়।

গুরুত্বপূর্ণ একটি সূক্ষ্মতা: slot-এ বসা element সরে যায় না। সেটি light DOM-এই থাকে, শুধু পর্দায় অন্য জায়গায় আঁকা হয়। তাই পাতার CSS তাকে স্বাভাবিকভাবে সাজাতে পারে। ভেতর থেকে সাজাতে আছে ::slotted(), তবে সে শুধু slot-এ সরাসরি বসা element-কে ধরে (তার ভেতরের নাতি-নাতনিকে নয়), আর দুই পক্ষে টানাটানি হলে পাতার CSS জেতে।

Declarative shadow DOM

এতক্ষণ shadow root বানাতে JavaScript লেগেছে। ফলে সার্ভারে বানানো পাতায় একটি সমস্যা: স্ক্রিপ্ট চলার আগে component খালি বা অগোছালো দেখায়, আর স্ক্রিপ্ট বন্ধ থাকলে কিছুই দেখায় না। সমাধান declarative shadow DOM: host-এর ভেতরে (সাধারণত প্রথম সন্তান হিসেবে) <template shadowrootmode="open"> লিখলে parser নিজেই সেই template-কে shadow root বানিয়ে দেয় — এক লাইন JavaScript ছাড়াই।

<style>
  /* বাইরের CSS — slot-এ বসা light DOM-কে এখনো ছুঁতে পারে */
  .role { color: #0f766e; }
</style>
<user-card>
  <template shadowrootmode="open">
    <style>
      :host { display: block; max-width: 300px; padding: 12px 16px;
              border: 1px solid #cbd5e1; border-radius: 12px; }
      ::slotted(h3) { margin: 0; }
      ::slotted(.role) { font-style: italic; }
      footer { color: #64748b; font-size: .85em; }
    </style>
    <slot name="title"></slot>
    <slot></slot>
    <footer><slot name="note">কোনো নোট নেই</slot></footer>
  </template>
  <h3 slot="title">নুসরাত জাহান</h3>
  <p class="role">ফ্রন্ট-এন্ড ডেভেলপার, রাজশাহী</p>
</user-card>
<script>
  const host = document.querySelector('user-card');
  const main = host.shadowRoot.querySelector('slot:not([name])');
  console.log('shadowRoot আছে?', host.shadowRoot !== null,
              '| নামহীন slot-এ', main.assignedElements().length, 'টি element');
</script>

একটি ফাঁদ জেনে রাখুন: declarative shadow DOM শুধু parser-এর পথে কাজ করে। innerHTML দিয়ে এমন HTML বসালে template শুধু template-ই থাকে।

// innerHTML দিলে declarative shadow DOM কাজ করে না — template থেকে যায় template হয়েই
box.innerHTML = '<x-card><template shadowrootmode="open">…</template></x-card>';

// HTML parser-এর পূর্ণ নিয়মে পার্স করতে নতুন method (নামেই সতর্কবার্তা: ইনপুট নিরাপদ হতে হবে)
box.setHTMLUnsafe('<x-card><template shadowrootmode="open">…</template></x-card>');

৯ · অ্যাক্সেসিবিলিটি, progressive enhancement আর framework-এর প্রশ্ন

Custom element কোনো বাটন নয়

<fancy-button> নামটি যত সুন্দরই হোক, ব্রাউজারের কাছে এটি একটি <span>-এর মতোই অর্থহীন। এর কোনো role নেই, Tab চাপলে ফোকাস আসে না, Enter-এ কিছু ঘটে না, ফর্মের সাথে যুক্ত নয়। পর্ব ১১-এর div-বাটনের সব সমস্যা হুবহু ফিরে আসে — শুধু নামটা নতুন।

<!-- ভুল: দেখতে বাটন, কিন্তু role নেই, Tab-এ ফোকাস হয় না, Enter-এ কাজ করে না -->
<fancy-button onclick="save()">সেভ করুন</fancy-button>

<!-- ঠিক: custom element শুধু মোড়ক, ভেতরে আসল button -->
<fancy-button>
  <button type="button">সেভ করুন</button>
</fancy-button>

• ভেতরে native element রাখুন। বাটনের কাজে <button>, লিংকে <a href>, ইনপুটে <input> — role, কি-বোর্ড ফোকাস, accessible name, ফর্মে জমা — সব বিনা পরিশ্রমে আসে।
• Shadow-এর দেয়াল ARIA-র id-কেও আটকায়। বাইরের <label for="x"> বা aria-labelledby shadow-এর ভেতরের id খুঁজে পায় না। তাই label আর input একই দিকে রাখুন, নয়তো light DOM-এ রেখে slot ব্যবহার করুন। (এই সমস্যা সমাধানের একটি প্রস্তাব নিয়ে কাজ চলছে, এখনো Baseline নয়।)
• ফোকাস ভেতরে পাঠাতে attachShadow({ mode: 'open', delegatesFocus: true }) — host-এ ফোকাস দিলে ভেতরের প্রথম ফোকাসযোগ্য element পায়।
• নিজস্ব ফর্ম-কন্ট্রোল বানাতে হলে ElementInternals (attachInternals(), static formAssociated = true) দিয়ে মান ফর্মে পাঠানো আর role দেওয়া যায়; এটি ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে আছে। তবু কি-বোর্ডের আচরণ নিজেকেই লিখতে হয় — তাই সম্ভব হলে native element-কেই মুড়ে দিন।

HTML web components — যা আছে তাকে উন্নত করা

অংশ ৮ পর্যন্ত আমাদের component-গুলো নিজেই সব কাঠামো বানিয়েছে; স্ক্রিপ্ট না চললে পাতায় ফাঁকা জায়গা। ২০২৩ সালের দিকে Jeremy Keith-সহ কয়েকজন ওয়েব ডেভেলপার একটি ভিন্ন ধরনকে “HTML web components” নামে জনপ্রিয় করেন: custom element-এর ভেতরে আগে থেকেই কাজ করা সাধারণ HTML থাকবে, আর component শুধু বাড়তি সুবিধা যোগ করবে। স্ক্রিপ্ট দেরিতে এলে, ব্যর্থ হলে বা বন্ধ থাকলেও মূল কাজ চলে — পর্ব ৪৮-এর progressive enhancement-এর সরাসরি প্রয়োগ। প্রায়ই এসব component-এ Shadow DOM-ই লাগে না, তাই পাতার CSS সরাসরি সাজাতে পারে।

<style>
  textarea { display: block; width: 100%; max-width: 320px; }
  char-count output { font-size: .9em; color: #475569; }
  char-count output.near { color: #b45309; font-weight: bold; }
</style>
<char-count>
  <label for="sms">SMS-এর লেখা</label>
  <textarea id="sms" maxlength="70" rows="3"></textarea>
</char-count>
<script>
  customElements.define('char-count', class extends HTMLElement {
    connectedCallback() {
      const box = this.querySelector('textarea');
      if (!box) return;                         // যা উন্নত করব, তা না থাকলে কিছুই নয়
      const max = Number(box.getAttribute('maxlength'));
      const out = document.createElement('output');
      this.append(out);
      const update = () => {
        const left = max - box.value.length;
        out.textContent = 'আর ' + left.toLocaleString('bn-BD') + 'টি অক্ষর লেখা যাবে';
        out.classList.toggle('near', left <= 10);
      };
      box.addEventListener('input', update);
      update();
      console.log('textarea আগেই কাজ করত — এখন শুধু গোনার সুবিধা যোগ হলো');
    }
  });
</script>

Web Components না framework — কখন কোনটি

React (২০১৩), Vue (২০১৪), Svelte-এর মতো JavaScript framework-ও component দিয়েই কাজ করে। তাহলে দুটির পার্থক্য কোথায়?

বাস্তবে প্রশ্নটা প্রায়ই “একটি না অন্যটি” নয়। বড় প্রতিষ্ঠান তাদের design system-এর বোতাম, ইনপুট আর কার্ড Web Components-এ বানায়, যাতে React, Vue বা সাধারণ HTML — সব দলের পাতায় একই component চলে; Adobe, Salesforce আর Microsoft-এর design system-এ এর উদাহরণ আছে, আর GitHub-এর পাতায় <relative-time>-এর মতো ছোট custom element ব্যবহার হয়। Google-এর Lit-এর মতো ছোট লাইব্রেরি Web Components লেখাকে framework-এর মতো আরামদায়ক করে। আর React ১৯ সংস্করণ থেকে custom element-কে পূর্ণ সমর্থন দেয়। আপনার সিদ্ধান্তের সহজ নিয়ম: একটি স্বয়ংসম্পূর্ণ widget, যা অনেক জায়গায় চলবে — Web Component; ডেটায় ঠাসা পুরো অ্যাপ — framework. দুই দিকের তুলনা বিস্তারিত দেখতে JavaScript কোর্সের React, Vue ও Svelte-এর পর্বটি পড়ুন; পর্ব ৫১-এ দেখা CSS framework-এর প্রশ্নটিও এর সাথে মেলে — যা নামাবেন, তার দাম দিতে হবে।

১০ · AI-এর যুগে — AI-এর লেখা DOM কোড আর component যাচাই

“একটা dropdown মেনু বানিয়ে দাও” — AI মুহূর্তেই কোড দেবে, প্রিভিউতে চলবেও। কিন্তু AI শিখেছে বহু বছরের পুরোনো কোড থেকে, যার বড় অংশ jQuery-যুগের অভ্যাসে লেখা। তাই প্রায়ই এমন কোড আসে:

// AI-এর পুরোনো ধাঁচ: চেহারা সরাসরি JavaScript-এ
btn.onclick = function () {
  if (menu.style.display === 'block') {
    menu.style.display = 'none';
    btn.style.background = '';
  } else {
    menu.style.display = 'block';
    btn.style.background = '#1e3a8a';
    btn.style.color = 'white';
  }
};

চলে, কিন্তু রং আর display JavaScript-এ আটকে গেছে, CSS-এর media query বা dark mode এগুলোকে হারাতে পারবে না, আর screen reader জানেই না মেনু খোলা কি না। অংশ ৩-এর মতো aria-expanded আর CSS selector-এ নিলে একই কাজ অর্ধেক কোডে, সবার জন্য হয়।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া DOM কোড বা component হাতে পেলে — যাচাইয়ের চেকলিস্ট

• স্ক্রিপ্টে .style. খুঁজেছি — রং, মাপ, display থাকলে class বা aria-*-তে সরিয়েছি (CSS variable-এ কাঁচা সংখ্যা দেওয়া চলবে)
• innerHTML-এ বাইরের কোনো লেখা যাচ্ছে না; গেলে textContent বা template ব্যবহার করেছি
• শুধু কি-বোর্ড দিয়ে (Tab, Enter, Space, Escape) পুরো component চালিয়েছি; DevTools-এর Accessibility প্যানেলে role আর নাম দেখেছি
• DevTools-এ JavaScript বন্ধ করে (Command Menu → “Disable JavaScript”) পাতা খুলেছি — মূল লেখা আর কাজ টিকে আছে কি না
• validator.w3.org-এ HTML, আর Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি
• সন্দেহজনক API-র নাম MDN-এ খুঁজেছি (বাতিল কি না), আর নতুন ফিচারের সাপোর্ট Can I use বা Baseline-এ দেখেছি