কাস্টম উপাদান সেরা অভ্যাস

কাস্টম উপাদান আপনাকে আপনার নিজস্ব HTML ট্যাগ তৈরি করতে দেয়। এই চেকলিস্টটি আপনাকে উচ্চ মানের উপাদান তৈরি করতে সাহায্য করার জন্য সর্বোত্তম অনুশীলনগুলিকে কভার করে৷

কাস্টম উপাদানগুলি আপনাকে HTML প্রসারিত করতে এবং আপনার নিজস্ব ট্যাগ সংজ্ঞায়িত করতে দেয়। এগুলি একটি অবিশ্বাস্যভাবে শক্তিশালী বৈশিষ্ট্য, তবে এগুলি নিম্ন-স্তরের, যার অর্থ আপনার নিজের উপাদানটি কীভাবে সর্বোত্তমভাবে প্রয়োগ করা যায় তা সর্বদা পরিষ্কার নয়৷

আপনাকে সর্বোত্তম সম্ভাব্য অভিজ্ঞতা তৈরি করতে সহায়তা করার জন্য আমরা এই চেকলিস্টটি একসাথে রেখেছি। এটি একটি ভাল আচরণ করা কাস্টম উপাদান হতে আমাদের মনে হয় এমন সমস্ত জিনিস ভেঙে দেয়।

চেকলিস্ট

ছায়া DOM

গুণাবলী এবং বৈশিষ্ট্য

ঘটনা

ব্যাখ্যাকারী

পৃষ্ঠার লেখককে ওভাররাইড করবেন না

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

connectedCallback() {
  if (!this.hasAttribute('role'))
    this.setAttribute('role', 'checkbox');
  if (!this.hasAttribute('tabindex'))
    this.setAttribute('tabindex', 0);

বৈশিষ্ট্য অলস করা

একজন বিকাশকারী আপনার উপাদানটির সংজ্ঞা লোড হওয়ার আগে একটি সম্পত্তি সেট করার চেষ্টা করতে পারে। এটি বিশেষভাবে সত্য যদি বিকাশকারী এমন একটি কাঠামো ব্যবহার করে যা লোডিং উপাদানগুলি পরিচালনা করে, সেগুলিকে পৃষ্ঠায় সন্নিবেশ করায় এবং একটি মডেলের সাথে তাদের বৈশিষ্ট্যগুলি আবদ্ধ করে৷

নিম্নলিখিত উদাহরণে, Angular ঘোষণামূলকভাবে তার মডেলের isChecked প্রপার্টি চেকবক্সের checked সম্পত্তির সাথে আবদ্ধ করছে। Howto-checkbox-এর সংজ্ঞাটি অলসভাবে লোড করা হলে, উপাদানটি আপগ্রেড হওয়ার আগে Angular চেক করা সম্পত্তি সেট করার চেষ্টা করতে পারে।

<howto-checkbox [checked]="defaults.isChecked"></howto-checkbox>

একটি কাস্টম উপাদান এর উদাহরণে ইতিমধ্যে কোনো বৈশিষ্ট্য সেট করা আছে কিনা তা পরীক্ষা করে এই দৃশ্যটি পরিচালনা করা উচিত। <howto-checkbox> _upgradeProperty() নামক একটি পদ্ধতি ব্যবহার করে এই প্যাটার্নটি প্রদর্শন করে।

connectedCallback() {
  ...
  this._upgradeProperty('checked');
}

_upgradeProperty(prop) {
  if (this.hasOwnProperty(prop)) {
    let value = this[prop];
    delete this[prop];
    this[prop] = value;
  }
}

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

পুনরায় প্রবেশের সমস্যা এড়িয়ে চলুন

এটি একটি অন্তর্নিহিত সম্পত্তিতে রাষ্ট্র প্রতিফলিত করার জন্য attributeChangedCallback() ব্যবহার করতে প্রলুব্ধ হয়, উদাহরণস্বরূপ:

// When the [checked] attribute changes, set the checked property to match.
attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'checked')
    this.checked = newValue;
}

কিন্তু এটি একটি অসীম লুপ তৈরি করতে পারে যদি প্রপার্টি সেটারও অ্যাট্রিবিউটে প্রতিফলিত হয়।

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    // OOPS! This will cause an infinite loop because it triggers the
    // attributeChangedCallback() which then sets this property again.
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

একটি বিকল্প হল প্রপার্টি সেটারকে অ্যাট্রিবিউটে প্রতিফলিত করার অনুমতি দেওয়া এবং গেটারকে অ্যাট্রিবিউটের উপর ভিত্তি করে এর মান নির্ধারণ করা।

set checked(value) {
  const isChecked = Boolean(value);
  if (isChecked)
    this.setAttribute('checked', '');
  else
    this.removeAttribute('checked');
}

get checked() {
  return this.hasAttribute('checked');
}

এই উদাহরণে, অ্যাট্রিবিউট যোগ করা বা অপসারণ করাও প্রপার্টি সেট করবে।

অবশেষে, attributeChangedCallback() এআরআইএ স্টেট প্রয়োগ করার মতো পার্শ্ব প্রতিক্রিয়াগুলি পরিচালনা করতে ব্যবহার করা যেতে পারে।

attributeChangedCallback(name, oldValue, newValue) {
  const hasValue = newValue !== null;
  switch (name) {
    case 'checked':
      // Note the attributeChangedCallback is only handling the *side effects*
      // of setting the attribute.
      this.setAttribute('aria-checked', hasValue);
      break;
    ...
  }
}