এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ওয়েব কম্পোনেন্ট থেকে লিট এলিমেন্ট পর্যন্ত

1. ভূমিকা

শেষ আপডেট: 2021-08-10

ওয়েব উপাদান

ওয়েব কম্পোনেন্ট হল ওয়েব প্ল্যাটফর্ম API-এর একটি সেট যা আপনাকে ওয়েব পৃষ্ঠা এবং ওয়েব অ্যাপে ব্যবহার করার জন্য নতুন কাস্টম, পুনঃব্যবহারযোগ্য, এনক্যাপসুলেটেড HTML ট্যাগ তৈরি করতে দেয়। ওয়েব কম্পোনেন্ট স্ট্যান্ডার্ডে তৈরি কাস্টম উপাদান এবং উইজেটগুলি আধুনিক ব্রাউজার জুড়ে কাজ করবে এবং যেকোন জাভাস্ক্রিপ্ট লাইব্রেরি বা ফ্রেমওয়ার্কের সাথে ব্যবহার করা যেতে পারে যা HTML এর সাথে কাজ করে।

লিট কি

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

লিট বৈশিষ্ট্যগুলি, বৈশিষ্ট্যগুলি এবং রেন্ডারিংয়ের মতো সাধারণ ওয়েব উপাদানগুলিকে সহজ করার জন্য API সরবরাহ করে।

আপনি কি শিখবেন

একটি ওয়েব উপাদান কি
ওয়েব উপাদানের ধারণা
কিভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করবেন
lit-html এবং LitElement কি?
Lit একটি ওয়েব কম্পোনেন্টের উপরে কি করে

আপনি কি নির্মাণ করবেন

একটি ভ্যানিলা থাম্বস আপ/ডাউন ওয়েব কম্পোনেন্ট
একটি থাম্বস আপ/ডাউন লিট-ভিত্তিক ওয়েব কম্পোনেন্ট

আপনি কি প্রয়োজন হবে

যেকোনো আপডেটেড আধুনিক ব্রাউজার (Chrome, Safari, Firefox, Chromium Edge)। সমস্ত আধুনিক ব্রাউজারে ওয়েব কম্পোনেন্ট কাজ করে এবং Microsoft Internet Explorer 11 এবং নন-ক্রোমিয়াম Microsoft Edge-এর জন্য পলিফিল উপলব্ধ।
HTML, CSS, JavaScript এবং Chrome DevTools এর জ্ঞান।

2. সেট আপ করা এবং খেলার মাঠ অন্বেষণ করা

কোড অ্যাক্সেস করা

কোডল্যাব জুড়ে এইরকম লিট খেলার মাঠের লিঙ্ক থাকবে:

খেলার মাঠ হল একটি কোড স্যান্ডবক্স যা সম্পূর্ণরূপে আপনার ব্রাউজারে চলে। এটি টাইপস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট ফাইলগুলি কম্পাইল এবং চালাতে পারে এবং এটি স্বয়ংক্রিয়ভাবে নোড মডিউলগুলিতে আমদানির সমাধান করতে পারে। যেমন

// before
import './my-file.js';
import 'lit';

// after
import './my-file.js';
import 'https://unpkg.com/lit?module';

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

আলোকিত খেলার মাঠের UI অন্বেষণ করা হচ্ছে

ফাইল নির্বাচক ট্যাব বারটি বিভাগ 1, কোড সম্পাদনা বিভাগটি বিভাগ 2 হিসাবে, আউটপুট পূর্বরূপটি বিভাগ 3 হিসাবে এবং পূর্বরূপ পুনরায় লোড বোতামটি বিভাগ 4 হিসাবে লেবেলযুক্ত।

লিট প্লেগ্রাউন্ড UI স্ক্রিনশট সেই বিভাগগুলিকে হাইলাইট করে যা আপনি এই কোডল্যাবে ব্যবহার করবেন।

ফাইল নির্বাচক। প্লাস বোতামটি নোট করুন...
ফাইল সম্পাদক।
কোড পূর্বরূপ।
রিলোড বোতাম।
ডাউনলোড বোতাম।

ভিএস কোড সেটআপ (উন্নত)

এই ভিএস কোড সেটআপ ব্যবহার করার সুবিধাগুলি এখানে রয়েছে:

টেমপ্লেট টাইপ চেকিং
টেমপ্লেট বুদ্ধিমত্তা এবং স্বয়ংসম্পূর্ণতা

আপনার যদি NPM, VS কোড ( লিট-প্লাগইন প্লাগইন সহ) ইতিমধ্যেই ইনস্টল করা থাকে এবং সেই পরিবেশটি কীভাবে ব্যবহার করতে হয় তা জানেন তবে আপনি নিম্নলিখিতগুলি করে এই প্রকল্পগুলি ডাউনলোড এবং শুরু করতে পারেন:

ডাউনলোড বোতাম টিপুন
একটি ডিরেক্টরিতে টার ফাইলের বিষয়বস্তু বের করুন
একটি ডেভ সার্ভার ইনস্টল করুন যা বেয়ার মডিউল স্পেসিফায়ারগুলিকে সমাধান করতে পারে (লিট টিম সুপারিশ করে @web/dev-server )
- এখানে একটি উদাহরণ হল package.json
dev সার্ভার চালান এবং আপনার ব্রাউজার খুলুন (যদি আপনি @web/dev-server ব্যবহার করেন তাহলে আপনি npx web-dev-server --node-resolve --watch --open ব্যবহার করতে পারেন)
- আপনি উদাহরণ package.json ব্যবহার করলে npm run serve ব্যবহার করুন

3. একটি কাস্টম উপাদান সংজ্ঞায়িত করুন

কাস্টম উপাদান

ওয়েব কম্পোনেন্ট হল 4টি নেটিভ ওয়েব API-এর একটি সংগ্রহ। তারা হল:

ES মডিউল
কাস্টম উপাদান
ছায়া DOM
এইচটিএমএল টেমপ্লেট

আপনি ইতিমধ্যেই ES মডিউল স্পেসিফিকেশন ব্যবহার করেছেন, যা আপনাকে <script type="module"> দিয়ে পৃষ্ঠায় লোড করা আমদানি এবং রপ্তানি সহ জাভাস্ক্রিপ্ট মডিউল তৈরি করতে দেয়।

একটি কাস্টম উপাদান সংজ্ঞায়িত করা

কাস্টম এলিমেন্ট স্পেসিফিকেশন ব্যবহারকারীদের জাভাস্ক্রিপ্ট ব্যবহার করে তাদের নিজস্ব এইচটিএমএল উপাদান সংজ্ঞায়িত করতে দেয়। নেটিভ ব্রাউজার উপাদান থেকে আলাদা করার জন্য নামগুলিতে অবশ্যই একটি হাইফেন ( - ) থাকতে হবে৷ index.js ফাইলটি সাফ করুন এবং একটি কাস্টম এলিমেন্ট ক্লাস সংজ্ঞায়িত করুন:

index.js

class RatingElement extends HTMLElement {}

customElements.define('rating-element', RatingElement);

একটি কাস্টম উপাদান একটি ক্লাস সংযুক্ত করে সংজ্ঞায়িত করা হয় যা একটি হাইফেনযুক্ত ট্যাগ নামের সাথে HTMLElement প্রসারিত করে। customElements.define এ করা কলটি ব্রাউজারকে বলে RatingElement শ্রেণীকে tagName 'rating-element' এর সাথে যুক্ত করতে। এর মানে হল আপনার নথিতে <rating-element> নামের প্রতিটি উপাদান এই শ্রেণীর সাথে যুক্ত হবে।

ডকুমেন্ট বডিতে একটি <rating-element> রাখুন এবং দেখুন কি রেন্ডার হয়।

index.html

<body>
 <rating-element></rating-element>
</body>

এখন, আউটপুট দেখে, আপনি দেখতে পাবেন যে কিছুই রেন্ডার হয়নি। এটি প্রত্যাশিত, কারণ আপনি ব্রাউজারকে বলেননি কিভাবে রেন্ডার করতে হয় <rating-element> । আপনি নিশ্চিত করতে পারেন যে কাস্টম এলিমেন্টের সংজ্ঞাটি Chrome Dev Tools-এর উপাদান নির্বাচকে <rating-element> নির্বাচন করে এবং কনসোলে, কল করে সফল হয়েছে:

$0.constructor

যা আউটপুট করা উচিত:

class RatingElement extends HTMLElement {}

কাস্টম উপাদান জীবনচক্র

কাস্টম উপাদানগুলি লাইফসাইকেল হুকের একটি সেটের সাথে আসে। তারা হল:

constructor
connectedCallback
disconnectedCallback
attributeChangedCallback
adoptedCallback

যখন উপাদানটি প্রথম তৈরি করা হয় তখন constructor বলা হয়: উদাহরণস্বরূপ, document.createElement('rating-element') বা new RatingElement() কল করে। কনস্ট্রাক্টর আপনার উপাদান সেট আপ করার জন্য একটি ভাল জায়গা, তবে উপাদান "বুট-আপ" কার্যকারিতার কারণে কনস্ট্রাক্টরে DOM ম্যানিপুলেশনগুলি করা সাধারণত খারাপ অনুশীলন হিসাবে বিবেচিত হয়।

কাস্টম উপাদানটি DOM-এর সাথে সংযুক্ত হলে connectedCallback বলা হয়। এটি সাধারণত যেখানে প্রাথমিক DOM ম্যানিপুলেশন ঘটে।

DOM থেকে কাস্টম উপাদান সরানোর পরে disconnectedCallback বলা হয়।

attributeChangedCallback(attrName, oldValue, newValue) বলা হয় যখন ব্যবহারকারী-নির্দিষ্ট কোনো বৈশিষ্ট্য পরিবর্তন হয়।

যখন কাস্টম উপাদান অন্য documentFragment থেকে HTMLTemplateElement এর মতো adoptNode মাধ্যমে প্রধান নথিতে গৃহীত হয় তখন adoptedCallback বলা হয়।

DOM রেন্ডার করুন

এখন, কাস্টম উপাদানে ফিরে যান এবং এর সাথে কিছু DOM যুক্ত করুন। উপাদানটির বিষয়বস্তু সেট করুন যখন এটি DOM-এর সাথে সংযুক্ত হয়:

index.js

class RatingElement extends HTMLElement {
 constructor() {
   super();
   this.rating = 0;
 }
 connectedCallback() {
   this.innerHTML = `
     <style>
       rating-element {
         display: inline-flex;
         align-items: center;
       }
       rating-element button {
         background: transparent;
         border: none;
         cursor: pointer;
       }
     </style>
     <button class="thumb_down" >
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
     </button>
     <span class="rating">${this.rating}</span>
     <button class="thumb_up">
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
     </button>
   `;
 }
}

customElements.define('rating-element', RatingElement);

constructor , আপনি উপাদানটির উপর rating নামে একটি উদাহরণ সম্পত্তি সংরক্ষণ করেন। connectedCallback , আপনি থাম্বস আপ এবং থাম্বস ডাউন বোতামগুলির সাথে বর্তমান রেটিং প্রদর্শন করতে <rating-element> -এ DOM বাচ্চাদের যোগ করুন।

4. ছায়া DOM

কেন ছায়া DOM?

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

index.html

<!DOCTYPE html>
<html>
 <head>
   <script src="./index.js" type="module"></script>
   <style>
     span {
       border: 1px solid red;
     }
   </style>
 </head>
 <body>
   <rating-element></rating-element>
 </body>
</html>

রেটিং এর জন্য আপনার আউটপুটে স্প্যানের চারপাশে একটি লাল বর্ডার বক্স থাকা উচিত। এটি একটি তুচ্ছ ঘটনা, কিন্তু DOM এনক্যাপসুলেশনের অভাব আরও জটিল অ্যাপ্লিকেশনের জন্য বড় সমস্যা হতে পারে। এখানেই Shadow DOM আসে।

একটি শ্যাডো রুট সংযুক্ত করা হচ্ছে

উপাদানটিতে একটি শ্যাডো রুট সংযুক্ত করুন এবং সেই রুটের ভিতরে DOM রেন্ডার করুন:

index.js

class RatingElement extends HTMLElement {
 constructor() {
   super();
   this.rating = 0;
 }
 connectedCallback() {
   const shadowRoot = this.attachShadow({mode: 'open'});

   shadowRoot.innerHTML = `
     <style>
       :host {
         display: inline-flex;
         align-items: center;
       }
       button {
         background: transparent;
         border: none;
         cursor: pointer;
       }
     </style>
     <button class="thumb_down" >
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
     </button>
     <span class="rating">${this.rating}</span>
     <button class="thumb_up">
       <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
     </button>
   `;
 }
}

customElements.define('rating-element', RatingElement);

আপনি যখন পৃষ্ঠাটি রিফ্রেশ করবেন, আপনি লক্ষ্য করবেন যে প্রধান নথির শৈলীগুলি আর শ্যাডো রুটের ভিতরে নোডগুলি নির্বাচন করতে পারে না।

আপনি এটা কিভাবে করলেন? connectedCallback আপনি this.attachShadow বলেছেন। open মোডের অর্থ হল ছায়ার বিষয়বস্তু পরিদর্শনযোগ্য এবং this.shadowRoot এর মাধ্যমেও শ্যাডো রুট অ্যাক্সেসযোগ্য করে তোলে। ক্রোম ইন্সপেক্টরের ওয়েব কম্পোনেন্টটিও দেখুন:

ক্রোম ইন্সপেক্টরে ডোম গাছ। একটি <rating-element> আছে যার চাইল্ড হিসেবে a#shadow-root (ওপেন) আছে এবং সেই shadowroot-এর ভিতরে আগে থেকে DOM আছে।

আপনার এখন একটি প্রসারণযোগ্য ছায়া রুট দেখতে হবে যা বিষয়বস্তু ধারণ করে। সেই শ্যাডো রুটের ভিতরের সবকিছুকে শ্যাডো ডম বলা হয়। আপনি যদি Chrome Dev Tools-এ রেটিং এলিমেন্ট নির্বাচন করেন এবং $0.children কল করেন, আপনি লক্ষ্য করবেন যে এটি কোন বাচ্চা দেয় না। এর কারণ হল Shadow DOM কে সরাসরি শিশু হিসাবে একই DOM গাছের একটি অংশ হিসাবে বিবেচনা করা হয় না বরং ছায়া গাছ হিসাবে বিবেচনা করা হয়।

হালকা DOM

একটি পরীক্ষা: <rating-element> এর সরাসরি চাইল্ড হিসাবে একটি নোড যোগ করুন :

index.html

<rating-element>
 <div>
   This is the light DOM!
 </div>
</rating-element>

পৃষ্ঠাটি রিফ্রেশ করুন, এবং আপনি দেখতে পাবেন যে এই কাস্টম উপাদানের হালকা DOM- এ এই নতুন DOM নোডটি পৃষ্ঠায় দেখা যাচ্ছে না। এর কারণ হল শ্যাডো ডোমের বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করার জন্য হালকা DOM নোডগুলি কীভাবে ছায়া ডোমে <slot> উপাদানগুলির মাধ্যমে প্রজেক্ট করা হয়।

5. HTML টেমপ্লেট

কেন টেমপ্লেট

innerHTML এবং টেমপ্লেট আক্ষরিক স্ট্রিংগুলি কোনও স্যানিটাইজেশন ছাড়াই ব্যবহার করলে স্ক্রিপ্ট ইনজেকশনের সাথে সুরক্ষা সমস্যা হতে পারে। অতীতে পদ্ধতিতে DocumentFragment ব্যবহার করা অন্তর্ভুক্ত ছিল, তবে এগুলি অন্যান্য সমস্যাগুলির সাথেও আসে যেমন চিত্রগুলি লোড করা এবং স্ক্রিপ্টগুলি যখন টেমপ্লেটগুলিকে সংজ্ঞায়িত করা হয় এবং সেইসাথে পুনর্ব্যবহারযোগ্যতার জন্য বাধাগুলি প্রবর্তন করা হয়৷ এখানেই <template> উপাদানটি আসে; টেমপ্লেটগুলি নিষ্ক্রিয় DOM প্রদান করে, নোড ক্লোন করার জন্য একটি অত্যন্ত কার্যকরী পদ্ধতি এবং পুনরায় ব্যবহারযোগ্য টেমপ্লেটিং।

টেমপ্লেট ব্যবহার করে

পরবর্তী, এইচটিএমএল টেমপ্লেট ব্যবহার করার জন্য উপাদানটি স্থানান্তর করুন:

index.html

<body>
 <template id="rating-element-template">
   <style>
     :host {
       display: inline-flex;
       align-items: center;
     }
     button {
       background: transparent;
       border: none;
       cursor: pointer;
     }
   </style>
   <button class="thumb_down" >
     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
   </button>
   <span class="rating"></span>
   <button class="thumb_up">
     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
   </button>
 </template>

 <rating-element>
   <div>
     This is the light DOM!
   </div>
 </rating-element>
</body>

এখানে আপনি মূল নথির DOM-এ একটি টেমপ্লেট ট্যাগে DOM বিষয়বস্তু স্থানান্তরিত করেছেন। এখন কাস্টম উপাদান সংজ্ঞা রিফ্যাক্টর:

index.js

class RatingElement extends HTMLElement {
 constructor() {
   super();
   this.rating = 0;
 }
 connectedCallback() {
   const shadowRoot = this.attachShadow({mode: 'open'});
   const templateContent = document.getElementById('rating-element-template').content;
   const clonedContent = templateContent.cloneNode(true);
   shadowRoot.appendChild(clonedContent);

   this.shadowRoot.querySelector('.rating').innerText = this.rating;
 }
}

customElements.define('rating-element', RatingElement);

এই টেমপ্লেট উপাদানটি ব্যবহার করার জন্য, আপনি টেমপ্লেটটি অনুসন্ধান করুন, এর বিষয়বস্তু পান এবং সেই নোডগুলিকে templateContent.cloneNode দিয়ে ক্লোন করুন যেখানে true যুক্তি একটি গভীর ক্লোন সম্পাদন করে। তারপরে আপনি ডেটা দিয়ে ডোম শুরু করুন।

অভিনন্দন, আপনার কাছে এখন একটি ওয়েব কম্পোনেন্ট আছে! দুর্ভাগ্যবশত এটি এখনও কিছু করে না, তাই পরবর্তী, কিছু কার্যকারিতা যোগ করুন।

6. কার্যকারিতা যোগ করা

সম্পত্তি বাঁধাই

বর্তমানে, রেটিং-উপাদানে রেটিং সেট করার একমাত্র উপায় হল উপাদানটি তৈরি করা, বস্তুর উপর rating বৈশিষ্ট্য সেট করা এবং তারপর এটিকে পৃষ্ঠায় রাখা। দুর্ভাগ্যবশত, নেটিভ এইচটিএমএল উপাদানগুলি এইভাবে কাজ করে না। নেটিভ এইচটিএমএল এলিমেন্ট প্রপার্টি এবং অ্যাট্রিবিউট উভয় পরিবর্তনের সাথে আপডেট হয়।

নিম্নোক্ত লাইনগুলি যোগ করে rating প্রপার্টি পরিবর্তিত হলে কাস্টম উপাদানটিকে ভিউ আপডেট করুন:

index.js

constructor() {
  super();
  this._rating = 0;
}

set rating(value) {
  this._rating = value;
  if (!this.shadowRoot) {
    return;
  }

  const ratingEl = this.shadowRoot.querySelector('.rating');
  if (ratingEl) {
    ratingEl.innerText = this._rating;
  }
}

get rating() {
  return this._rating;
}

আপনি রেটিং সম্পত্তির জন্য একটি সেটার এবং গেটার যোগ করুন এবং তারপরে আপনি রেটিং উপাদানের পাঠ্যটি উপলব্ধ থাকলে তা আপডেট করবেন। এর মানে হল আপনি যদি এলিমেন্টে রেটিং প্রপার্টি সেট করেন, ভিউ আপডেট হবে; আপনার ডেভ টুলস কনসোলে এটি একটি দ্রুত পরীক্ষা দিন!

অ্যাট্রিবিউট বাইন্ডিং

এখন, বৈশিষ্ট্য পরিবর্তন হলে ভিউ আপডেট করুন; আপনি <input value="newValue"> সেট করার সময় এটি একটি ইনপুট এর ভিউ আপডেট করার অনুরূপ। সৌভাগ্যবশত, ওয়েব কম্পোনেন্ট লাইফসাইকেলে attributeChangedCallback অন্তর্ভুক্ত রয়েছে। নিম্নলিখিত লাইন যোগ করে রেটিং আপডেট করুন:

index.js

static get observedAttributes() {
 return ['rating'];
}

attributeChangedCallback(attributeName, oldValue, newValue) {
 if (attributeName === 'rating') {
   const newRating = Number(newValue);
   this.rating = newRating;
 }
}

attributeChangedCallback ট্রিগার করার জন্য, আপনাকে অবশ্যই RatingElement.observedAttributes which defines the attributes to be observed for changes । আপনি তারপর DOM এ ঘোষণামূলকভাবে রেটিং সেট করুন। একবার চেষ্টা করে দেখুন:

index.html

<rating-element rating="5"></rating-element>

রেটিং এখন ঘোষণামূলকভাবে আপডেট করা উচিত!

বোতাম কার্যকারিতা

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

index.html

<style>
...

 :host([vote=up]) .thumb_up {
   fill: green;
 }
  :host([vote=down]) .thumb_down {
   fill: red;
 }
</style>

Shadow DOM-এ :host নির্বাচক নোড বা কাস্টম উপাদানকে বোঝায় যেটির সাথে শ্যাডো রুট সংযুক্ত থাকে। এই ক্ষেত্রে, যদি vote বৈশিষ্ট্যটি "up" হয় তবে এটি থাম্ব-আপ বোতামটিকে সবুজ করবে, কিন্তু যদি vote "down", then it will turn the thumb-down button red । এখন, আপনি যেভাবে rating প্রয়োগ করেছেন তার অনুরূপ vote জন্য একটি প্রতিফলিত সম্পত্তি / বৈশিষ্ট্য তৈরি করে এর জন্য যুক্তি প্রয়োগ করুন। প্রপার্টি সেটার এবং গেটার দিয়ে শুরু করুন:

index.js

constructor() {
  super();
  this._rating = 0;
  this._vote = null;
}

set vote(newValue) {
  const oldValue = this._vote;
  if (newValue === oldValue) {
    return;
  }
  if (newValue === 'up') {
    if (oldValue === 'down') {
      this.rating += 2;
    } else {
      this.rating += 1;
    }
  } else if (newValue === 'down') {
    if (oldValue === 'up') {
      this.rating -= 2;
    } else {
      this.rating -= 1;
    }
  }
  this._vote = newValue;
  this.setAttribute('vote', newValue);
}

get vote() {
  return this._vote;
}

আপনি constructor null দিয়ে _vote ইনস্ট্যান্স প্রপার্টি শুরু করুন এবং সেটারে আপনি চেক করেন যে নতুন মান ভিন্ন কিনা। যদি তাই হয়, আপনি সেই অনুযায়ী রেটিং সামঞ্জস্য করুন এবং, গুরুত্বপূর্ণভাবে, this.setAttribute এর সাথে হোস্টের কাছে vote বৈশিষ্ট্যটি প্রতিফলিত করুন।

এরপরে, অ্যাট্রিবিউট বাইন্ডিং সেট আপ করুন:

index.js

static get observedAttributes() {
  return ['rating', 'vote'];
}

attributeChangedCallback(attributeName, oldValue, newValue) {
  if (attributeName === 'rating') {
    const newRating = Number(newValue);

    this.rating = newRating;
  } else if (attributeName === 'vote') {
    this.vote = newValue;
  }
}

আবার, এটি একই প্রক্রিয়া যা আপনি rating অ্যাট্রিবিউট বাইন্ডিং এর মধ্য দিয়ে গেছেন; আপনি observedAttributes vote যোগ করেন এবং আপনি attributeChangedCallback vote বৈশিষ্ট্য সেট করেন। এবং এখন অবশেষে, বোতামগুলির কার্যকারিতা দিতে কিছু ক্লিক ইভেন্ট শ্রোতা যোগ করুন!

index.js

constructor() {
 super();
 this._rating = 0;
 this._vote = null;
 this._boundOnUpClick = this._onUpClick.bind(this);
 this._boundOnDownClick = this._onDownClick.bind(this);
}

connectedCallback() {
  ...
  this.shadowRoot.querySelector('.thumb_up')
    .addEventListener('click', this._boundOnUpClick);
  this.shadowRoot.querySelector('.thumb_down')
    .addEventListener('click', this._boundOnDownClick);
}

disconnectedCallback() {
  this.shadowRoot.querySelector('.thumb_up')
    .removeEventListener('click', this._boundOnUpClick);
  this.shadowRoot.querySelector('.thumb_down')
    .removeEventListener('click', this._boundOnDownClick);
}

_onUpClick() {
  this.vote = 'up';
}

_onDownClick() {
  this.vote = 'down';
}

constructor আপনি কিছু ক্লিক শ্রোতাকে উপাদানের সাথে আবদ্ধ করেন এবং রেফারেন্সগুলিকে চারপাশে রাখেন। connectedCallback আপনি বোতামগুলিতে ক্লিক ইভেন্টগুলির জন্য শুনতে পাবেন৷ disconnectedCallback আপনি এই শ্রোতাদের পরিষ্কার করেন এবং ক্লিক শ্রোতাদের নিজেরাই, আপনি যথাযথভাবে vote সেট করেন।

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

7. Lit-html

কোড চেকপয়েন্ট

কেন lit-html

প্রথমত এবং সর্বাগ্রে, <template> ট্যাগটি দরকারী এবং কার্যকারিতা, কিন্তু এটি উপাদানের যুক্তির সাথে প্যাকেজ করা হয় না তাই বাকি যুক্তির সাথে টেমপ্লেটটি বিতরণ করা কঠিন করে তোলে। অতিরিক্তভাবে যেভাবে টেমপ্লেট উপাদানগুলি ব্যবহার করা হয় তা অন্তর্নিহিতভাবে বাধ্যতামূলক কোডকে ধার দেয়, যা অনেক ক্ষেত্রে ঘোষণামূলক কোডিং প্যাটার্নের তুলনায় কম পাঠযোগ্য কোডের দিকে নিয়ে যায়।

এখানেই lit-html আসে! Lit html হল Lit-এর রেন্ডারিং সিস্টেম যা আপনাকে জাভাস্ক্রিপ্টে এইচটিএমএল টেমপ্লেট লিখতে দেয়, তারপর দক্ষতার সাথে সেই টেমপ্লেটগুলিকে ডেটা সহ পুনরায় রেন্ডার করতে এবং DOM তৈরি এবং আপডেট করতে দেয়। এটি জনপ্রিয় JSX এবং VDOM লাইব্রেরির মতো কিন্তু এটি ব্রাউজারে নেটিভভাবে এবং অনেক ক্ষেত্রে অনেক বেশি দক্ষতার সাথে চলে।

লিট এইচটিএমএল ব্যবহার করে

এর পরে, Lit টেমপ্লেট ব্যবহার করতে নেটিভ ওয়েব কম্পোনেন্ট rating-element স্থানান্তর করুন যা ট্যাগড টেমপ্লেট লিটারাল ব্যবহার করে যেটি ফাংশন যা টেমপ্লেট স্ট্রিংগুলিকে একটি বিশেষ সিনট্যাক্সের সাথে আর্গুমেন্ট হিসাবে গ্রহণ করে। Lit তারপর দ্রুত রেন্ডারিং প্রদানের পাশাপাশি নিরাপত্তার জন্য কিছু স্যানিটাইজেশন বৈশিষ্ট্য প্রদান করতে হুডের নিচে টেমপ্লেট উপাদান ব্যবহার করে। ওয়েব কম্পোনেন্টে একটি render() পদ্ধতি যোগ করে একটি Lit টেমপ্লেটে index.html এ <template> স্থানান্তর করে শুরু করুন:

ট্যাগ করা টেমপ্লেট আক্ষরিক সিনট্যাক্স হাইলাইটিং Google কোডল্যাবগুলির মতো সমস্ত কোডিং পরিবেশে উপলব্ধ নয়৷ আপনি যদি ট্যাগ করা টেমপ্লেট লিটারেল লেখার জন্য ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করেন, তাহলে সিনট্যাক্স হাইলাইট করার পাশাপাশি অন্যান্য ওয়েব কম্পোনেন্ট বৈশিষ্ট্যের জন্য লিট-প্লাগইন প্লাগইন ডাউনলোড করার কথা বিবেচনা করা উচিত, অথবা কেবল lit.dev খেলার মাঠ ব্যবহার করা উচিত!

index.js

// Dont forget to import from Lit!
import {render, html} from 'lit';

class RatingElement extends HTMLElement {
  ...
  render() {
    if (!this.shadowRoot) {
      return;
    }

    const template = html`
      <style>
        :host {
          display: inline-flex;
          align-items: center;
        }
        button {
          background: transparent;
          border: none;
          cursor: pointer;
        }

       :host([vote=up]) .thumb_up {
         fill: green;
       }

       :host([vote=down]) .thumb_down {
         fill: red;
       }
      </style>
      <button class="thumb_down">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
      </button>
      <span class="rating">${this.rating}</span>
      <button class="thumb_up">
        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
      </button>`;

    render(template, this.shadowRoot);
  }
}

এছাড়াও আপনি index.html থেকে আপনার টেমপ্লেট মুছে ফেলতে পারেন। এই রেন্ডার পদ্ধতিতে আপনি template নামক একটি ভেরিয়েবল সংজ্ঞায়িত করেন এবং html ট্যাগ করা টেমপ্লেট আক্ষরিক ফাংশনটি চালু করেন। আপনি আরও লক্ষ্য করবেন যে আপনি ${...} এর টেমপ্লেট আক্ষরিক ইন্টারপোলেশন সিনট্যাক্স ব্যবহার করে span.rating উপাদানের ভিতরে একটি সাধারণ ডেটা বাইন্ডিং করেছেন। এর মানে হল যে শেষ পর্যন্ত আপনাকে আর সেই নোডটি অপরিহার্যভাবে আপডেট করতে হবে না। অতিরিক্তভাবে, আপনি লিট render পদ্ধতিকে কল করেন যা সিঙ্ক্রোনাসভাবে টেমপ্লেটটিকে ছায়া রুটে রেন্ডার করে।

ঘোষণামূলক সিনট্যাক্সে স্থানান্তরিত হচ্ছে

এখন আপনি <template> উপাদান থেকে পরিত্রাণ পেয়েছেন, নতুন-সংজ্ঞায়িত render পদ্ধতিতে কল করার পরিবর্তে কোডটি রিফ্যাক্টর করুন। লিসেনার কোড পরিষ্কার করতে আপনি lit's ইভেন্ট লিসেনার বাইন্ডিং ব্যবহার করে শুরু করতে পারেন:

index.js

<button
    class="thumb_down"
    @click=${() => {this.vote = 'down'}}>
...
<button
    class="thumb_up"
    @click=${() => {this.vote = 'up'}}>

লিট টেমপ্লেটগুলি @EVENT_NAME বাইন্ডিং সিনট্যাক্স সহ একটি নোডে একটি ইভেন্ট লিসেনার যোগ করতে পারে যেখানে, এই ক্ষেত্রে, এই বোতামগুলি ক্লিক করার সময় আপনি vote সম্পত্তি আপডেট করেন৷

এরপরে, constructor এবং connectedCallback এবং disconnectedCallback ইভেন্ট লিসেনার ইনিশিয়ালাইজেশন কোডটি পরিষ্কার করুন:

index.js

constructor() {
  super();
  this._rating = 0;
  this._vote = null;
}

connectedCallback() {
  this.attachShadow({mode: 'open'});
  this.render();
}

// remove disonnectedCallback and _onUpClick and _onDownClick

আপনি তিনটি কলব্যাক থেকে ক্লিক শ্রোতা যুক্তি অপসারণ করতে সক্ষম হয়েছেন এবং এমনকি disconnectedCallback কলব্যাক সম্পূর্ণরূপে মুছে ফেলতে সক্ষম হয়েছেন! আপনি connectedCallback থেকে সমস্ত DOM ইনিশিয়ালাইজেশন কোড মুছে ফেলতে সক্ষম হয়েছেন যাতে এটি আরও মার্জিত দেখায়। এর মানে হল যে আপনি _onUpClick এবং _onDownClick শ্রোতা পদ্ধতিগুলি থেকে পরিত্রাণ পেতে পারেন!

অবশেষে, render পদ্ধতি ব্যবহার করার জন্য প্রপার্টি সেটার আপডেট করুন যাতে ডোম আপডেট করতে পারে যখন বৈশিষ্ট্য বা বৈশিষ্ট্য পরিবর্তন হয়:

index.js

set rating(value) {
  this._rating = value;
  this.render();
}

...

set vote(newValue) {
  const oldValue = this._vote;
  if (newValue === oldValue) {
    return;
  }

  if (newValue === 'up') {
    if (oldValue === 'down') {
      this.rating += 2;
    } else {
      this.rating += 1;
    }
  } else if (newValue === 'down') {
    if (oldValue === 'up') {
      this.rating -= 2;
    } else {
      this.rating -= 1;
    }
  }

  this._vote = newValue;
  this.setAttribute('vote', newValue);
  // add render method
  this.render();
}

এখানে, আপনি rating সেটার থেকে ডোম আপডেট যুক্তি সরাতে সক্ষম হয়েছেন এবং আপনি vote সেটার থেকে render জন্য একটি কল যোগ করেছেন। এখন টেমপ্লেটটি অনেক বেশি পঠনযোগ্য কারণ আপনি এখন দেখতে পাচ্ছেন যেখানে বাইন্ডিং এবং ইভেন্ট শ্রোতাদের প্রয়োগ করা হয়েছে৷

পৃষ্ঠাটি রিফ্রেশ করুন, এবং আপনার কাছে একটি কার্যকরী রেটিং বোতাম থাকা উচিত যা আপভোট টিপলে এইরকম দেখতে হবে!

থাম্ব আপ এবং ডাউন রেটিং স্লাইডার যার মান 6 এবং উপরে থাম্ব রঙিন সবুজ

8. LitElement

কেন LitElement

কোডের সাথে কিছু সমস্যা এখনও বিদ্যমান। প্রথমত, আপনি vote সম্পত্তি বা বৈশিষ্ট্য পরিবর্তন করলে, এটি rating প্রপার্টি পরিবর্তন করতে পারে যার ফলে দুইবার render কল করা হবে। রেন্ডারের পুনরাবৃত্ত কলগুলি মূলত একটি নো-অপ এবং দক্ষ হওয়া সত্ত্বেও, জাভাস্ক্রিপ্ট ভিএম এখনও সেই ফাংশনটিকে দুইবার সিঙ্ক্রোনাস কল করার জন্য সময় ব্যয় করছে। দ্বিতীয়ত, নতুন বৈশিষ্ট্য এবং গুণাবলী যোগ করা ক্লান্তিকর কারণ এতে প্রচুর বয়লারপ্লেট কোড প্রয়োজন। এখানেই LitElement আসে!

LitElement হল দ্রুত, লাইটওয়েট ওয়েব উপাদান তৈরি করার জন্য Lit এর বেস ক্লাস যা ফ্রেমওয়ার্ক এবং পরিবেশ জুড়ে ব্যবহার করা যেতে পারে। এর পরে, এটি ব্যবহার করার জন্য বাস্তবায়ন পরিবর্তন করে rating-element LitElement আমাদের জন্য কী করতে পারে তা একবার দেখুন!

LitElement ব্যবহার করে

lit প্যাকেজ থেকে LitElement বেস ক্লাস আমদানি এবং সাবক্লাস করে শুরু করুন:

index.js

import {LitElement, html, css} from 'lit';

class RatingElement extends LitElement {
// remove connectedCallback()
...

আপনি LitElement আমদানি করেন যা rating-element জন্য নতুন বেস ক্লাস। এরপরে আপনি আপনার html ইম্পোর্ট এবং শেষ পর্যন্ত css রাখুন যা আমাদের css ম্যাথ, টেমপ্লেটিং এবং অন্যান্য বৈশিষ্ট্যগুলির জন্য সিএসএস ট্যাগযুক্ত টেমপ্লেট লিটারালগুলিকে সংজ্ঞায়িত করতে দেয়।

এর পরে, রেন্ডার পদ্ধতি থেকে স্টাইলগুলিকে লিটের স্ট্যাটিক স্টাইলশীটে সরান:

index.js

class RatingElement extends LitElement {
  static get styles() {
    return css`
      :host {
        display: inline-flex;
        align-items: center;
      }
      button {
        background: transparent;
        border: none;
        cursor: pointer;
      }

      :host([vote=up]) .thumb_up {
        fill: green;
      }

      :host([vote=down]) .thumb_down {
        fill: red;
      }
    `;
  }
 ...

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

জীবনচক্র

Lit নেটিভ ওয়েব কম্পোনেন্ট কলব্যাকের উপরে রেন্ডার লাইফসাইকেল কলব্যাক পদ্ধতির একটি সেট প্রবর্তন করে। যখন ঘোষিত Lit বৈশিষ্ট্য পরিবর্তন করা হয় তখন এই কলব্যাকগুলি ট্রিগার হয়।

এই বৈশিষ্ট্যটি ব্যবহার করতে, আপনাকে অবশ্যই স্থিরভাবে ঘোষণা করতে হবে যে কোন বৈশিষ্ট্যগুলি রেন্ডার জীবনচক্রকে ট্রিগার করবে৷

index.js

static get properties() {
  return {
    rating: {
      type: Number,
    },
    vote: {
      type: String,
      reflect: true,
    }
  };
}

// remove observedAttributes() and attributeChangedCallback()
// remove set rating() get rating()

এখানে, আপনি সংজ্ঞায়িত করেন যে rating এবং vote LitElement রেন্ডারিং লাইফসাইকেলকে ট্রিগার করবে এবং সেইসাথে স্ট্রিং অ্যাট্রিবিউটগুলিকে বৈশিষ্ট্যে রূপান্তর করতে ব্যবহার করা হবে এমন প্রকারগুলিকে সংজ্ঞায়িত করবে।

আপনি যদি একটি LitElement-এ একটি জটিল বস্তু পাস করতে চান, তাহলে আপনি এটিকে type: Object হিসাবে সংজ্ঞায়িত করতে পারেন, তবে প্রায়শই ভাল অনুশীলন হল বস্তুগুলিকে স্ট্রিং বৈশিষ্ট্য হিসাবে পাস না করে বরং একটি সম্পত্তি হিসাবে। যেমন

document.querySelector('user-profile').user = this.user;

অথবা যদি আপনি lit-html ব্যবহার করছেন:

<user-profile .user=${this.user}></user-profile>

এমনকি আরও ভাল অনুশীলন হল অবজেক্টটিকে ঘোষণামূলকভাবে ওয়েব কম্পোনেন্টে ছড়িয়ে দেওয়া। যেমন

<user-profile .name=${this.user.name} .age=${this.user.age}>
  ${this.user.family.map(member => html`
        <family-member
             .name=${member.name}
             .relation=${member.relation}>
        </family-member>`)}
</user-profile>

উপরন্তু, vote সম্পত্তিতে reflect পতাকা স্বয়ংক্রিয়ভাবে হোস্ট উপাদানের vote বৈশিষ্ট্য আপডেট করবে যা আপনি vote সেটারের মধ্যে ম্যানুয়ালি ট্রিগার করেছেন।

এখন আপনার কাছে স্ট্যাটিক প্রোপার্টি ব্লক আছে, আপনি সমস্ত অ্যাট্রিবিউট এবং প্রোপার্টি রেন্ডার আপডেট করার যুক্তি মুছে ফেলতে পারেন। এর মানে আপনি নিম্নলিখিত পদ্ধতিগুলি অপসারণ করতে পারেন:

connectedCallback
observedAttributes
attributeChangedCallback
rating (সেটার এবং গেটার)
vote (সেটার এবং গেটার কিন্তু সেটার থেকে পরিবর্তনের যুক্তি রাখুন)

আপনি যা রাখেন তা হল constructor পাশাপাশি একটি নতুন willUpdate জীবনচক্র পদ্ধতি যোগ করা:

index.js

constructor() {
  super();
  this.rating = 0;
  this.vote = null;
}

willUpdate(changedProps) {
  if (changedProps.has('vote')) {
    const newValue = this.vote;
    const oldValue = changedProps.get('vote');

    if (newValue === 'up') {
      if (oldValue === 'down') {
        this.rating += 2;
      } else {
        this.rating += 1;
      }
    } else if (newValue === 'down') {
      if (oldValue === 'up') {
        this.rating -= 2;
      } else {
        this.rating -= 1;
      }
    }
  }
}

// remove set vote() and get vote()

এখানে, আপনি সহজভাবে rating শুরু করেন এবং vote এবং আপনি vote সেটার লজিকটিকে willUpdate লাইফসাইকেল পদ্ধতিতে নিয়ে যান। যখনই কোনো আপডেট করার প্রপার্টি পরিবর্তন করা হয় তখন render আগে willUpdate মেথড বলা হয়, কারণ LitElement প্রপার্টি পরিবর্তন করে এবং রেন্ডারিংকে অ্যাসিঙ্ক্রোনাস করে। willUpdate এ প্রতিক্রিয়াশীল বৈশিষ্ট্যের পরিবর্তনগুলি (যেমন this.rating ) অপ্রয়োজনীয় render লাইফসাইকেল কলগুলিকে ট্রিগার করবে না।

অবশেষে, render হল একটি LitElement জীবনচক্র পদ্ধতি যার জন্য আমাদের একটি Lit টেমপ্লেট ফেরত দিতে হবে:

index.js

render() {
  return html`
    <button
        class="thumb_down"
        @click=${() => {this.vote = 'down'}}>
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/></svg>
    </button>
    <span class="rating">${this.rating}</span>
    <button
        class="thumb_up"
        @click=${() => {this.vote = 'up'}}>
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg>
    </button>`;
}

আপনাকে আর শ্যাডো রুট পরীক্ষা করতে হবে না, এবং আপনাকে আর 'lit' প্যাকেজ থেকে ইম্পোর্ট করা render ফাংশনটিকে আর কল করতে হবে না।

আপনার উপাদান এখন পূর্বরূপ রেন্ডার করা উচিত; এটি একটি ক্লিক দিন!

9. অভিনন্দন

অভিনন্দন, আপনি স্ক্র্যাচ থেকে সফলভাবে একটি ওয়েব কম্পোনেন্ট তৈরি করেছেন এবং এটিকে একটি LitElement-এ বিকশিত করেছেন!

এটি খুবই ছোট (<5kb মিনিফাইড + gzipped), অতি দ্রুত, এবং কোড করার জন্য সত্যিই মজা! আপনি অন্যান্য ফ্রেমওয়ার্কের দ্বারা গ্রাস করার জন্য উপাদানগুলি তৈরি করতে পারেন, অথবা আপনি এটি দিয়ে সম্পূর্ণ অ্যাপ তৈরি করতে পারেন!

আপনি এখন জানেন যে একটি ওয়েব কম্পোনেন্ট কী, কীভাবে এটি তৈরি করতে হয় এবং কীভাবে লিট তাদের তৈরি করা সহজ করে তোলে!

কোড চেকপয়েন্ট

আপনি কি আমাদের বিরুদ্ধে আপনার চূড়ান্ত কোড পরীক্ষা করতে চান? এখানে তুলনা করুন.

এরপর কি?

অন্যান্য কোডল্যাব কিছু পরীক্ষা করে দেখুন!

আরও পড়া

আলোকিত ইন্টারেক্টিভ টিউটোরিয়াল
দ্য লিট ডক্স
ওপেন ওয়েব কম্পোনেন্টস - একটি সম্প্রদায় পরিচালিত নির্দেশিকা এবং টুলিং সম্প্রদায়
WebComponents.dev - সমস্ত পরিচিত ফ্রেমওয়ার্কের মধ্যে একটি ওয়েব কম্পোনেন্ট তৈরি করুন

সম্প্রদায়

লিট এবং ফ্রেন্ডস স্ল্যাক - বৃহত্তম ওয়েব উপাদান সম্প্রদায়
টুইটারে @buildWithLit - লিট তৈরি করা দলের টুইটার অ্যাকাউন্ট
ওয়েব কম্পোনেন্ট এসএফ - সান ফ্রান্সিসকোর জন্য একটি ওয়েব কম্পোনেন্ট মিটআপ