"ওয়েব উপাদান" এবং "কাস্টম উপাদান" প্রায়শই মিশ্রিত হয় এবং এই প্রশ্নের শিরোনামের জন্য ওয়েব অনুসন্ধানগুলি এখনও খুব বেশি স্পষ্টতা দেয় না। এটি ঠিক করা যাক।
"ওয়েব উপাদান" এবং "কাস্টম উপাদান" প্রায়শই মিশ্রিত হয় এবং এই প্রশ্নের শিরোনামের জন্য ওয়েব অনুসন্ধানগুলি এখনও খুব বেশি স্পষ্টতা দেয় না। এটি ঠিক করা যাক।
উত্তর:
শ্যাডো ডিওএম, টেমপ্লেট এবং এইচটিএমএল আমদানির পাশাপাশি কাস্টম উপাদানগুলি ওয়েব উপাদানগুলির স্ট্যান্ডার্ডের একটি স্পেসিফিকেশন অংশ ।
অনুমান থেকে:
কাস্টম উপাদানগুলি লেখকদের তাদের নিজস্ব বৈশিষ্ট্যযুক্ত বৈশিষ্ট্যযুক্ত DOM উপাদানগুলি তৈরি করার একটি উপায় সরবরাহ করে। যদিও লেখকরা সর্বদা নথিতে নন-স্ট্যান্ডার্ড উপাদানগুলি ব্যবহার করতে পারতেন, স্ক্রিপ্ট বা অনুরূপ দ্বারা সত্যের পরে প্রয়োগ-নির্দিষ্ট আচরণ যুক্ত করে, এই জাতীয় উপাদানগুলি historতিহাসিকভাবে অ-অনুসারী এবং খুব কার্যকরী নয় not একটি কাস্টম উপাদান সংজ্ঞায়িত করে, লেখক পার্সারকে জানাতে পারেন যে কীভাবে কোনও উপাদান সঠিকভাবে তৈরি করা যায় এবং সেই শ্রেণীর উপাদানগুলির পরিবর্তনের ক্ষেত্রে কীভাবে প্রতিক্রিয়া দেখা উচিত।
স্পেসিফিকেশন এখন v1 এ । পূর্ববর্তী সংস্করণ, v0, সমর্থিত হয়েছে ক্রোম 33 থেকে , এবং একটি ভিন্ন এপিআই ছিল, ব্যবহার document.registerElement- যা হয় এখন অবচিত ।
কাস্টম উপাদানগুলি হয় স্বায়ত্তশাসিত হতে পারে (স্ক্র্যাচ থেকে একটি নতুন উপাদান তৈরি করে (এটি, এইচটিএমলেমেন্ট প্রসারিত ), বা কোনও বিদ্যমান এইচটিএমএল উপাদান (যেমন এইচটিএমএল বাটন এলিমেন্ট) কাস্টমাইজ করতে পারে।
// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });customElements.define()কলটির দ্বিতীয় প্যারামিটার উপাদানটির আচরণের প্রয়োগকারী শ্রেণীর নাম। স্বায়ত্তশাসিত উপাদানগুলির জন্য এবং কাস্টমাইজড অন্তর্নির্মিত উপাদানগুলির জন্য বিশেষায়নের উদাহরণগুলি দেখুন ।
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Draw some fancy animation effects!
});
}
}কাস্টম উপাদানগুলি কিছু আধুনিক ব্রাউজারে স্থানীয়ভাবে সমর্থিত হয় এবং পুরানো ব্রাউজারগুলির সাফারি 7+ এবং আই 11 এ ফিরে যাওয়ার জন্য পলিফিল্ড করা যেতে পারে । আরও দেখুন v1 এ polyfill ।
একটি কাস্টম উপাদানটিতে টেমপ্লেট এবং শ্যাডো ডিওএম ব্যবহার করে আপনি উপাদানটিকে পরিচালনা এবং পুনরায় পুনরায় ব্যবহারযোগ্য করে তুলতে পারেন।
টেমপ্লেটগুলি HTML ব্যবহার করে কাস্টম উপাদানগুলির কাঠামো ঘোষণা করতে দেয়:
<!-- Template Definition -->
<template id="fancy-element-template">
<style>
...
</style>
<div id="container">
<p>Some fancy markup goes here...</p>
</div>
</template>
<!-- Custom Element usage -->
<fancy-element></fancy-element>ছায়া ডিওএম স্টাইল, আইডি এবং সামগ্রীগুলির শ্রেণিগুলিকে নিজেই স্কোপ করার অনুমতি দেয়। এটি সিএসএসের রক্তপাত বা কাস্টম উপাদানটির অভ্যন্তরে এর বাইরে থেকে অ্যাক্সেস প্রতিরোধ করে।
customElements.define('fancy-element', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#fancy-element-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
...
});গুগল বিকাশকারী নিবন্ধগুলি: