কাস্টম উপাদানগুলিকে স্কোপড রেজিস্ট্রিগুলির সাথে আচরণ করতে দিন

Jayson Chen

Patrick Brosset

প্রকাশিত: ৯ মার্চ, ২০২৬

কাস্টম এলিমেন্ট ওয়েব অ্যাপ ডেভেলপারদের তাদের অনন্য আচরণের মাধ্যমে UI কম্পোনেন্ট তৈরি, শেয়ার এবং পুনঃব্যবহার করতে সাহায্য করে, যার ফলে ডেভেলপমেন্ট সহজ হয়। কিন্তু যখন আপনার অ্যাপ বিভিন্ন কাস্টম এলিমেন্টের সেট একত্রিত করে, তখন জিনিসগুলি এলোমেলো হয়ে যেতে পারে এবং নামের সংঘর্ষ ঘটতে পারে। স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি এই সমস্যার সমাধান করে!

মাইক্রোসফট এজ টিম এই বৈশিষ্ট্যটি নিয়ে কাজ করেছে, এবং আমরা আনন্দের সাথে ঘোষণা করছি যে স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রিগুলি এখন এজ এবং ক্রোম 146, পাশাপাশি অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজার থেকে ডিফল্টরূপে উপলব্ধ। আপনি এখন কাস্টম এলিমেন্টগুলিকে এনক্যাপসুলেট করতে পারেন, যা উপাদান এবং মাইক্রো-ফ্রন্টএন্ড লাইব্রেরির ডেভেলপারদের দীর্ঘস্থায়ী সমস্যা সমাধান করে।

স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি ওয়েব ডেভেলপারদের জন্য গুরুত্বপূর্ণ প্যাটার্ন আনলক করে। এখন, আপনি একাধিক টিম দ্বারা স্বাধীনভাবে তৈরি একাধিক কাস্টম এলিমেন্ট লাইব্রেরি, অথবা একই লাইব্রেরির একাধিক সংস্করণ পাশাপাশি ব্যবহার করতে পারেন।

স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি কী?

আজকাল, একটি ওয়েবপেজের প্রতিটি কাস্টম এলিমেন্ট ডেফিনিশন window.customElements এ একটি একক, শেয়ার্ড রেজিস্ট্রিতে থাকে। এর মানে হল যে যদি দুটি ভিন্ন লাইব্রেরি একই ট্যাগ নামের সাথে একটি কাস্টম এলিমেন্ট সংজ্ঞায়িত করার চেষ্টা করে, যেমন <my-button> , তাহলে একটি ত্রুটি দেখা দেবে এবং পৃষ্ঠাটি ভেঙে যাবে। এটি বাস্তব জগতে একটি উল্লেখযোগ্য সমস্যা। বৃহৎ অ্যাপ্লিকেশন যারা একাধিক টিম, ডিজাইন সিস্টেম বা মাইক্রো-ফ্রন্টএন্ড থেকে তাদের ইউজার ইন্টারফেস তৈরি করে তারা সহজেই নামকরণের সংঘর্ষের সম্মুখীন হতে পারে। স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রি আপনাকে স্বাধীন রেজিস্ট্রি তৈরি করতে দিয়ে এটি সমাধান করে। প্রতিটি রেজিস্ট্রি তার নিজস্ব কাস্টম এলিমেন্ট ডেফিনিশনের সেট বজায় রাখে, যা গ্লোবাল রেজিস্ট্রি এবং একে অপরের থেকে সম্পূর্ণ বিচ্ছিন্ন।

একটি নতুন রেজিস্ট্রি তৈরি করুন

গ্লোবাল window.customElements রেজিস্ট্রিতে প্রতিটি কাস্টম উপাদান সংজ্ঞায়িত করার পরিবর্তে:

1. new CustomElementRegistry() কল করে একটি নতুন রেজিস্ট্রি তৈরি করুন।
2. আপনার নতুন রেজিস্ট্রিকে একটি নির্দিষ্ট সুযোগ দিন (আপনার রেজিস্ট্রি স্কোপিং দেখুন)।
3. নতুন রেজিস্ট্রিতে যে উপাদানগুলি যাবে তা সংজ্ঞায়িত করুন।

তারপর, যখন একটি কাস্টম উপাদান ব্যবহার করা হয়, তখন ব্রাউজার সংশ্লিষ্ট রেজিস্ট্রি থেকে উপাদানটির সংজ্ঞা অনুসন্ধান করে, যা অগত্যা বিশ্বব্যাপী নয়। এর অর্থ হল আপনার পৃষ্ঠার বিভিন্ন অংশ সম্পূর্ণ ভিন্ন কাস্টম উপাদান সংজ্ঞা ব্যবহার করতে পারে।

আপনার রেজিস্ট্রির পরিধি বাড়ান

একটি কাস্টম এলিমেন্ট রেজিস্ট্রি একটি ডকুমেন্ট, একটি শ্যাডো রুট, অথবা একটি পৃথক এলিমেন্টের মধ্যে সীমাবদ্ধ করা যেতে পারে।

একটি ছায়ামূল পর্যন্ত ব্যাপ্তি

একটি নতুন রেজিস্ট্রিকে একটি শ্যাডো রুটে স্কোপ করতে, attachShadow() পদ্ধতিটি কল করার সময় customElementRegistry বিকল্পটি ব্যবহার করুন। সেই শ্যাডো রুটের ভিতরে থাকা সমস্ত কাস্টম উপাদান এখন সংশ্লিষ্ট স্কোপড রেজিস্ট্রিতে থাকা সংজ্ঞাটি ব্যবহার করবে:

// Create your custom registry.
const registry = new CustomElementRegistry();
// Define a custom element in the new registry.
registry.define('my-card', class extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from scoped registry!';
  }
});

// Create shadow root, providing it with your new custom element registry.
const host = document.querySelector('#host');
const shadow = host.attachShadow({
  mode: 'open',
  customElementRegistry: registry,
});

shadow.innerHTML = '<my-card></my-card>';

ঘোষণামূলক ছায়া DOM

একটি <template> এলিমেন্টে shadowrootcustomelementregistry অ্যাট্রিবিউট ব্যবহার করে ব্রাউজারকে জানান যে ফলস্বরূপ shadow root গ্লোবাল রেজিস্ট্রির পরিবর্তে একটি স্কোপড রেজিস্ট্রি ব্যবহার করছে:

<my-host>
  <template shadowrootmode="open" shadowrootcustomelementregistry>
    <my-widget></my-widget>
  </template>
</my-host>

  const registry = new CustomElementRegistry();
  registry.define('my-widget', class extends HTMLElement {
    connectedCallback() { this.textContent = 'Scoped!'; }
  });

  const shadow = document.querySelector('my-host').shadowRoot;
  registry.initialize(shadow);

উদাহরণে দেখানো হয়েছে, অ্যাট্রিবিউটটি কাস্টম এলিমেন্ট রেজিস্ট্রির জন্য স্থান সংরক্ষণ করে এবং ব্যবহারকারীকে রেজিস্ট্রিটিকে শ্যাডো রুটে সংজ্ঞায়িত এবং আরম্ভ করতে হবে একটি সংযোগ বিচ্ছিন্ন ডকুমেন্টে স্কোপিং

আপনি একটি ডকুমেন্টের রেজিস্ট্রিও স্কোপ করতে পারেন, যেমন document.implementation.createHTMLDocument() দ্বারা তৈরি। এটি আপনাকে <template> উপাদানগুলি ক্লোন করতে এবং অফ-স্ক্রিন ডকুমেন্ট ম্যানিপুলেশন করতে দেয়, প্রতিটি উপাদানের নিজস্ব বিচ্ছিন্ন সংজ্ঞা সহ। এটি করার জন্য, CustomElementRegistry.initialize() পদ্ধতিটি ব্যবহার করুন:

// Create a new registry.
const registry = new CustomElementRegistry();
registry.define('app-widget', AppWidget);

// Create a document, and use registry.initialize() to scope the registry to the document.
const doc = document.implementation.createHTMLDocument('');
registry.initialize(doc);

doc.body.innerHTML = '<app-widget></app-widget>';

একটি পৃথক উপাদানের ব্যাপ্তি

আপনি customElementRegistry অপশনটি document.createElement() এ পাস করে একটি রেজিস্ট্রি সরাসরি একটি এলিমেন্ট এবং তার সাবট্রির সাথে সংযুক্ত করতে পারেন। এলিমেন্ট এবং এর ডিসেন্ডেন্টগুলি সেই রেজিস্ট্রির বিরুদ্ধে সমাধান করবে, DOM এর যে অংশেই পরে সন্নিবেশ করা হোক না কেন:

// Create a registry and define a custom element in it.
const registry = new CustomElementRegistry();
registry.define('fancy-label', FancyLabel);

// Create a new DOM element and scope the new registry to it.
const el = document.createElement('fancy-input', {
  customElementRegistry: registry,
});

// Use a custom element in the new DOM element.
el.innerHTML = '<fancy-label>Name</fancy-label>';

আরও জানুন

আরও জানতে, এজ ডেমো এবং এর সোর্স কোডটি দেখুন, এবং MDN এর CustomElementRegistry রেফারেন্স নিবন্ধটি পড়ুন।

ক্রোমিয়াম প্রকল্পের মাধ্যমে আমাদের সহযোগিতার জন্য স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রিগুলি এখন মাইক্রোসফ্ট এজ এবং ক্রোম উভয় ক্ষেত্রেই ডিফল্টরূপে সক্রিয় করা হয়েছে, পাশাপাশি অন্যান্য ক্রোমিয়াম-ভিত্তিক ব্রাউজারেও।

আপনাকে কোনও সেটিং সক্ষম করতে হবে না বা কোনও অরিজিন ট্রায়ালে সাইন-আপ করতে হবে না। আপনি আজই Chromium-ভিত্তিক ব্রাউজারগুলিতে এই বৈশিষ্ট্যটি ব্যবহার শুরু করতে পারেন।

যদি আপনার এই বৈশিষ্ট্যটি অন্য ব্রাউজারে প্রয়োগ করার প্রয়োজন হয়, তাহলে Scoped কাস্টম এলিমেন্ট রেজিস্ট্রিগুলিকে থাম্বস-আপ প্রতিক্রিয়া জানান এবং আপনার ব্যবহারের ক্ষেত্রে এবং সমাধানের জন্য একটি মন্তব্য করুন।

যদি আপনি কোনও ক্রোমিয়াম-ভিত্তিক ব্রাউজারে বৈশিষ্ট্যটি বাস্তবায়নের সময় কোনও বাগ খুঁজে পান, তাহলে crbug.com/new এ আমাদের তদন্তের জন্য একটি সমস্যা খুলুন।

আমরা আশা করি যে স্কোপড কাস্টম এলিমেন্ট রেজিস্ট্রিগুলি ওয়েব উপাদানগুলির ব্যবহারকে আরও সহজ করে তুলবে।