Scoped CSS এবং Shadow DOM এর মাধ্যমে স্টাইলিং

Polymer ফ্রেমওয়ার্কে Scoped CSS এবং Shadow DOM ওয়েব অ্যাপ্লিকেশনগুলোর স্টাইলিং এবং UI কন্ট্রোল করার জন্য দুটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য। এগুলোর মাধ্যমে আপনি একটি কাস্টম উপাদান তৈরি করতে পারেন এবং সেই উপাদানের ভিতরে স্টাইলিং এবং স্ক্রিপ্টিং সম্পূর্ণভাবে ইনক্যাপসুলেট করতে পারেন। এর ফলে আপনার অ্যাপ্লিকেশন আরও সংগঠিত, পুনঃব্যবহারযোগ্য এবং সুরক্ষিত হয়।

১. Scoped CSS:

Scoped CSS হল এমন একটি স্টাইলিং পদ্ধতি যেখানে CSS শুধুমাত্র নির্দিষ্ট একটি উপাদানের মধ্যে প্রযোজ্য থাকে। এটি ব্রাউজারে অন্যান্য অংশের উপর প্রভাব ফেলবে না। Polymer-এ, আপনি স্টাইলগুলোকে dom-module ট্যাগের ভিতরে সন্নিবেশ করতে পারেন এবং তা শুধুমাত্র ঐ কাস্টম উপাদানে প্রযোজ্য হবে।

Scoped CSS কিভাবে কাজ করে?

Polymer Framework-এ Scoped CSS ব্যবহার করতে, আপনাকে dom-module এর মধ্যে <style> ট্যাগ ব্যবহার করতে হবে, যা ওই মডিউলের কাস্টম উপাদানটির জন্য CSS স্টাইলিং নির্ধারণ করবে। এই স্টাইল শুধুমাত্র কাস্টম উপাদানটির জন্য প্রযোজ্য হবে, বাকি অ্যাপ্লিকেশনের উপর প্রভাব ফেলবে না।

উদাহরণ:

<dom-module id="custom-card">
  <template>
    <style>
      :host {
        display: block;
        padding: 16px;
        background-color: lightblue;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }
      h2 {
        font-size: 24px;
        color: darkblue;
      }
      p {
        font-size: 16px;
        color: gray;
      }
    </style>
    <h2>Custom Card</h2>
    <p>This is a custom card component with scoped CSS styling.</p>
  </template>

  <script>
    Polymer({
      is: 'custom-card'
    });
  </script>
</dom-module>

ব্যাখ্যা:

• <style> ট্যাগের ভিতর CSS স্টাইলিংটি কেবলমাত্র custom-card কাস্টম উপাদানে প্রযোজ্য হবে। এই স্টাইলটি এই উপাদানটি ব্যবহার করার সময়ই কার্যকর হবে, এবং এর বাইরের কোনো HTML উপাদানের ওপর এর প্রভাব পড়বে না।
• :host সিলেক্টর: এই সিলেক্টরটি কাস্টম উপাদানের মূল উপাদানকে লক্ষ্য করে। এখানে :host ব্যবহার করে, উপাদানটির মার্জিন, প্যাডিং, ব্যাকগ্রাউন্ড কালার, এবং অন্যান্য স্টাইল সেট করা হয়েছে।

২. Shadow DOM:

Shadow DOM হল এমন একটি ওয়েব স্ট্যান্ডার্ড, যা উপাদানের ভিতরের DOM এবং স্টাইলিংকে অন্য উপাদানগুলির থেকে বিচ্ছিন্ন করে রাখে। Polymer-এ Shadow DOM এর সাহায্যে আপনি কাস্টম উপাদান তৈরি করতে পারেন যা স্টাইল এবং স্ক্রিপ্টগুলির কারণে বাইরের ডকুমেন্টের সাথে সংঘর্ষের মুখোমুখি না হয়।

Shadow DOM এর মাধ্যমে স্টাইলিং:

Polymer Shadow DOM ব্যবহারের মাধ্যমে আপনি একটি কাস্টম উপাদান তৈরি করতে পারেন যা সম্পূর্ণরূপে ইনক্যাপসুলেটেড থাকে। এর মাধ্যমে আপনি ডকুমেন্টের মূল স্টাইলিং থেকে একেবারে বিচ্ছিন্নভাবে উপাদানটির স্টাইলিং নিয়ন্ত্রণ করতে পারবেন।

উদাহরণ:

<dom-module id="shadow-example">
  <template>
    <style>
      :host {
        display: block;
        padding: 20px;
        background-color: lightgreen;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      h1 {
        font-size: 32px;
        color: darkgreen;
      }
    </style>
    <h1>This is a Shadow DOM Example</h1>
  </template>

  <script>
    Polymer({
      is: 'shadow-example'
    });
  </script>
</dom-module>

ব্যাখ্যা:

• <style> ট্যাগ: এই ট্যাগে দেওয়া স্টাইলগুলি কেবলমাত্র Shadow DOM-এর ভিতরে প্রযোজ্য হবে এবং বাইরের ডকুমেন্টের স্টাইলের সঙ্গে কোনো সংঘর্ষ ঘটাবে না।
• :host সিলেক্টর: Shadow DOM এর উপাদানের মূল অংশের স্টাইলিং নির্ধারণ করে, যেমন, উপাদানের প্যাডিং, ব্যাকগ্রাউন্ড এবং শেডো ইফেক্ট।

Scoped CSS এবং Shadow DOM এর মধ্যে পার্থক্য:

• Scoped CSS: এটি CSS এর একটি বিশেষ ধরণ যেখানে CSS শুধুমাত্র কাস্টম উপাদানে প্রযোজ্য হবে, তবে ব্রাউজারের অন্যান্য অংশের ওপর এর প্রভাব থাকবে না।
• Shadow DOM: এটি একটি সম্পূর্ণ ইনক্যাপসুলেটেড DOM তৈরি করে, যার মধ্যে স্টাইল, স্ক্রিপ্ট এবং উপাদানগুলি বাইরের ডকুমেন্টের থেকে বিচ্ছিন্ন থাকে। Shadow DOM এর ভিতরের সবকিছু বাইরের HTML বা CSS থেকে প্রভাবিত হয় না।

Polymer এর Scoped CSS এবং Shadow DOM এর উপকারিতা:

1. ইনক্যাপসুলেশন: Scoped CSS এবং Shadow DOM দিয়ে আপনি আপনার কাস্টম উপাদানগুলিকে সম্পূর্ণরূপে ইনক্যাপসুলেট করতে পারেন, যাতে বাইরের স্টাইল বা স্ক্রিপ্টের সাথে কোন সংঘর্ষ না হয়।
2. স্টাইল কন্ট্রোল: আপনি প্রতিটি কাস্টম উপাদানের স্টাইলিং সম্পূর্ণভাবে নিয়ন্ত্রণ করতে পারবেন, যা অ্যাপ্লিকেশনের অভ্যন্তরে একে অপরকে প্রভাবিত না করবে।
3. পুনঃব্যবহারযোগ্যতা: Shadow DOM এবং Scoped CSS কাস্টম উপাদানগুলোকে পুনঃব্যবহারযোগ্য এবং স্থিতিশীল করে তোলে। এটি আপনাকে একই উপাদান অন্য প্রকল্পে বা অ্যাপ্লিকেশনে সহজেই ব্যবহার করার সুযোগ দেয়।
4. অন্যথায় স্টাইল কনফ্লিক্ট থেকে রক্ষা: Shadow DOM এর মাধ্যমে আপনি স্টাইল কনফ্লিক্ট থেকে মুক্ত থাকতে পারবেন কারণ এটি একেবারে আলাদা DOM তৈরি করে।

Polymer ফ্রেমওয়ার্কে Scoped CSS এবং Shadow DOM ওয়েব ডেভেলপমেন্টের ক্ষেত্রে অত্যন্ত কার্যকরী এবং শক্তিশালী বৈশিষ্ট্য। এগুলোর মাধ্যমে আপনি কাস্টম উপাদান তৈরি করতে পারেন যা পূর্ণরূপে ইনক্যাপসুলেটেড এবং পুনঃব্যবহারযোগ্য। এর ফলে অ্যাপ্লিকেশনটি আরও সংগঠিত, সুরক্ষিত এবং রক্ষণাবেক্ষণযোগ্য হয়।