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

ছায়া DOM 201

সিএসএস এবং স্টাইলিং

Eric Bidelman

এই নিবন্ধটি শ্যাডো DOM এর সাথে আপনি করতে পারেন এমন আরও আশ্চর্যজনক জিনিস নিয়ে আলোচনা করে। এটি Shadow DOM 101 -এ আলোচিত ধারণাগুলির উপর ভিত্তি করে তৈরি করে। আপনি যদি একটি ভূমিকা খুঁজছেন, সেই নিবন্ধটি দেখুন।

ভূমিকা

চলুন মোকাবেলা করা যাক. আনস্টাইলড মার্কআপ সম্পর্কে সেক্সি কিছুই নেই। আমাদের জন্য সৌভাগ্যের বিষয়, ওয়েব কম্পোনেন্টের পিছনের উজ্জ্বল লোকেরা এটি আগে থেকেই দেখেছিল এবং আমাদের ঝুলে রাখে নি। সিএসএস স্কোপিং মডিউল একটি ছায়া গাছে বিষয়বস্তু স্টাইল করার জন্য অনেকগুলি বিকল্পকে সংজ্ঞায়িত করে।

শৈলী এনক্যাপসুলেশন

ছায়া DOM-এর মূল বৈশিষ্ট্যগুলির মধ্যে একটি হল ছায়ার সীমানা । এটির অনেক সুন্দর বৈশিষ্ট্য রয়েছে, তবে সেরাগুলির মধ্যে একটি হল এটি বিনামূল্যে স্টাইল এনক্যাপসুলেশন প্রদান করে। অন্যভাবে বলেছেন:

<div><h3>Light DOM</h3></div>
<script>
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = `
  <style>
    h3 {
      color: red;
    }
  </style>
  <h3>Shadow DOM</h3>
`;
</script>

এই ডেমো সম্পর্কে দুটি আকর্ষণীয় পর্যবেক্ষণ আছে:

এই পৃষ্ঠায় অন্যান্য h3 আছে, কিন্তু একমাত্র যেটি h3 নির্বাচকের সাথে মেলে, এবং সেইজন্য লাল স্টাইল করা হয়েছে, সেটি হল ShadowRoot-এ। আবার, ডিফল্টভাবে স্কোপড শৈলী।
এই পৃষ্ঠায় সংজ্ঞায়িত অন্যান্য শৈলীর নিয়ম যা লক্ষ্য h3s আমার বিষয়বস্তুতে রক্তপাত করে না। কারণ নির্বাচকরা ছায়ার সীমানা অতিক্রম করেন না ।

গল্পের নৈতিক? আমরা বাইরের বিশ্বের থেকে শৈলী encapsulation আছে. ধন্যবাদ ছায়া DOM!

হোস্ট উপাদান স্টাইলিং

:host আপনাকে ছায়া ট্রি হোস্ট করা উপাদান নির্বাচন এবং স্টাইল করতে দেয়:

<button class="red">My Button</button>
<script>
var button = document.querySelector('button');
var root = button.createShadowRoot();
root.innerHTML = `
  <style>
    :host {
      text-transform: uppercase;
    }
  </style>
  <content></content>
`;
</script>

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

:host(<selector>) এর কার্যকরী ফর্মটি আপনাকে হোস্ট উপাদানটিকে লক্ষ্য করতে দেয় যদি এটি একটি <selector> এর সাথে মেলে।

উদাহরণ - শুধুমাত্র যদি উপাদানটিরই শ্রেণী .different থাকে (যেমন <x-foo class="different"></x-foo> ):

:host(.different) {
    ...
}

ব্যবহারকারী রাজ্যে প্রতিক্রিয়া

আপনি যখন একটি কাস্টম এলিমেন্ট তৈরি করছেন এবং বিভিন্ন ব্যবহারকারীর অবস্থার (:hover, :focus, :active, ইত্যাদি) প্রতিক্রিয়া জানাতে চান তখন :host এর জন্য একটি সাধারণ ব্যবহারের ক্ষেত্রে।

<style>
  :host {
    opacity: 0.4;
    transition: opacity 420ms ease-in-out;
  }
  :host(:hover) {
    opacity: 1;
  }
  :host(:active) {
    position: relative;
    top: 3px;
    left: 3px;
  }
</style>

একটি উপাদান থিমিং

:host-context(<selector>) pseudo class হোস্ট এলিমেন্টের সাথে মেলে যদি এটি বা এর কোনো পূর্বপুরুষ <selector> এর সাথে মেলে।

:host-context() এর একটি সাধারণ ব্যবহার হল একটি উপাদানকে তার চারপাশের উপর ভিত্তি করে থিম করার জন্য। উদাহরণস্বরূপ, অনেক লোক <html> বা <body> এ একটি ক্লাস প্রয়োগ করে থিমিং করে:

<body class="different">
  <x-foo></x-foo>
</body>

আপনি করতে পারেন :host-context(.different) to style <x-foo> যখন এটি ক্লাস .different এর সাথে একটি উপাদানের বংশধর হয় :

:host-context(.different) {
  color: red;
}

এটি আপনাকে একটি উপাদানের শ্যাডো ডোমে শৈলীর নিয়মগুলিকে এনক্যাপসুলেট করার ক্ষমতা দেয় যা এটির প্রসঙ্গের উপর ভিত্তি করে অনন্যভাবে স্টাইল করে।

এক শ্যাডো রুটের মধ্যে থেকে একাধিক হোস্ট প্রকারকে সমর্থন করুন

:host এর আরেকটি ব্যবহার হল আপনি যদি একটি থিমিং লাইব্রেরি তৈরি করেন এবং একই Shadow DOM থেকে অনেক ধরনের হোস্ট উপাদানের স্টাইলিং সমর্থন করতে চান।

:host(x-foo) {
    /* Applies if the host is a <x-foo> element.*/
}

:host(x-foo:host) {
    /* Same as above. Applies if the host is a <x-foo> element. */
}

:host(div) {
    /* Applies if the host element is a <div>. */
}

বাইরে থেকে শ্যাডো DOM অভ্যন্তরীণ স্টাইলিং

::shadow সিউডো-এলিমেন্ট এবং /deep/ কম্বিনেটর হল সিএসএস অথরিটির ভর্পাল সোর্ডের মতো। তারা ছায়া গাছের মধ্যে শৈলী উপাদানের জন্য ছায়া DOM এর সীমানা ভেদ করার অনুমতি দেয়।

::ছায়া ছদ্ম-উপাদান

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

উদাহরণস্বরূপ, যদি কোনো এলিমেন্ট একটি শ্যাডো রুট হোস্ট করে থাকে, তাহলে আপনি #host::shadow span {} লিখতে পারেন যাতে তার ছায়া গাছের সমস্ত স্প্যান স্টাইল করা যায়।

<style>
  #host::shadow span {
    color: red;
  }
</style>

<div id="host">
  <span>Light DOM</span>
</div>

<script>
  var host = document.querySelector('div');
  var root = host.createShadowRoot();
  root.innerHTML = `
    <span>Shadow DOM</span>
    <content></content>
  `;
</script>

উদাহরণ (কাস্টম উপাদান) - <x-tabs> এর Shadow DOM-এ <x-panel> সন্তান রয়েছে। প্রতিটি প্যানেল h2 শিরোনাম সমন্বিত নিজস্ব ছায়া গাছ হোস্ট করে। মূল পৃষ্ঠা থেকে সেই শিরোনামগুলি স্টাইল করতে, কেউ লিখতে পারে:

x-tabs::shadow x-panel::shadow h2 {
    ...
}

/গভীর/ সংযোজক

/deep/ সংযোজক ::shadow এর মত, কিন্তু আরো শক্তিশালী। এটি সম্পূর্ণরূপে সমস্ত ছায়ার সীমানা উপেক্ষা করে এবং যেকোন সংখ্যক ছায়া গাছের মধ্যে অতিক্রম করে। সহজভাবে বললে, /deep/ আপনাকে একটি উপাদানের সাহসে ড্রিল করতে এবং যেকোনো নোডকে লক্ষ্য করতে দেয়।

কাস্টম এলিমেন্টের জগতে /deep/ কম্বিনেটর বিশেষভাবে উপযোগী যেখানে শ্যাডো DOM-এর একাধিক স্তর থাকা সাধারণ। প্রধান উদাহরণ হল কাস্টম উপাদানগুলির একটি গুচ্ছ বাসা বাঁধা (প্রত্যেকটি তাদের নিজস্ব ছায়া গাছ হোস্ট করে) বা <shadow> ব্যবহার করে অন্যের থেকে উত্তরাধিকারসূত্রে পাওয়া একটি উপাদান তৈরি করা।

উদাহরণ (কাস্টম উপাদান) - সমস্ত <x-panel> উপাদান নির্বাচন করুন যেগুলি <x-tabs> এর বংশধর, গাছের যে কোনও জায়গায়:

x-tabs /deep/ x-panel {
    ...
}

উদাহরণ - ক্লাস .library-theme সহ সমস্ত উপাদান স্টাইল করুন, ছায়া গাছের যে কোনো জায়গায়:

body /deep/ .library-theme {
    ...
}

querySelector() এর সাথে কাজ করা

ঠিক যেমন .shadowRoot DOM ট্রাভার্সালের জন্য শ্যাডো ট্রি খোলে, তেমনি কম্বিনেটররা সিলেক্টর ট্রাভার্সালের জন্য শ্যাডো ট্রি খুলে দেয়। উন্মাদনার নেস্টেড চেইন লেখার পরিবর্তে, আপনি একটি একক বিবৃতি লিখতে পারেন:

// No fun.
document.querySelector('x-tabs').shadowRoot
        .querySelector('x-panel').shadowRoot
        .querySelector('#foo');

// Fun.
document.querySelector('x-tabs::shadow x-panel::shadow #foo');

স্টাইলিং নেটিভ উপাদান

নেটিভ এইচটিএমএল নিয়ন্ত্রণ শৈলীর জন্য একটি চ্যালেঞ্জ। অনেক লোক কেবল হাল ছেড়ে দেয় এবং তাদের নিজস্ব রোল করে। যাইহোক, ::shadow এবং /deep/ এর সাথে, ওয়েব প্ল্যাটফর্মের যে কোনো উপাদান যেটি Shadow DOM ব্যবহার করে স্টাইল করা যেতে পারে। দুর্দান্ত উদাহরণ হল <input> প্রকার এবং <video> :

video /deep/ input[type="range"] {
  background: hotpink;
}

দ্রষ্টব্য: ::shadow সিউডো-এলিমেন্ট এবং /deep/ কম্বিনেটর কি স্টাইল এনক্যাপসুলেশনের উদ্দেশ্যকে হারায়? বাক্সের বাইরে, শ্যাডো DOM বহিরাগতদের কাছ থেকে দুর্ঘটনাজনিত স্টাইলিং প্রতিরোধ করে কিন্তু এটি কখনই বুলেট প্রুফ ভেস্ট হওয়ার প্রতিশ্রুতি দেয় না। বিকাশকারীদের ইচ্ছাকৃতভাবে আপনার ছায়া গাছের ভিতরের অংশগুলিকে স্টাইল করার অনুমতি দেওয়া উচিত...যদি তারা জানে যে তারা কী করছে। আরও নিয়ন্ত্রণ থাকা নমনীয়তা, থিমিং এবং আপনার উপাদানগুলির পুনরায় ব্যবহারযোগ্যতার জন্যও ভাল।

শৈলী হুক তৈরি

কাস্টমাইজেশন ভাল. কিছু ক্ষেত্রে, আপনি আপনার ছায়ার স্টাইলিং শিল্ডে ছিদ্র করতে এবং অন্যদের স্টাইল করার জন্য হুক তৈরি করতে চাইতে পারেন।

ব্যবহার করে ::ছায়া এবং /গভীর/

/deep/ এর পিছনে অনেক শক্তি আছে। এটি উপাদান লেখকদের পৃথক উপাদানকে শৈলীযোগ্য হিসাবে মনোনীত করার বা থিমযোগ্য হিসাবে অনেকগুলি উপাদানকে মনোনীত করার একটি উপায় দেয়।

উদাহরণ - সমস্ত ছায়া গাছ উপেক্ষা করে .library-theme ক্লাস আছে এমন সমস্ত উপাদানকে স্টাইল করুন:

body /deep/ .library-theme {
    ...
}

কাস্টম সিউডো উপাদান ব্যবহার করে

ওয়েবকিট এবং ফায়ারফক্স উভয়ই নেটিভ ব্রাউজার উপাদানগুলির অভ্যন্তরীণ অংশগুলি স্টাইল করার জন্য সিউডো উপাদানগুলিকে সংজ্ঞায়িত করে৷ একটি ভাল উদাহরণ হল input[type=range] । আপনি টার্গেট করে স্লাইডার থাম্ব <span style="color:blue">blue</span> স্টাইল করতে পারেন ::-webkit-slider-thumb :

input[type=range].custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: blue;
  width: 10px;
  height: 40px;
}

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

আপনি pseudo বৈশিষ্ট্য ব্যবহার করে একটি কাস্টম সিউডো উপাদান হিসাবে একটি উপাদান মনোনীত করতে পারেন। এর মান, বা নাম, "x-" দিয়ে প্রিফিক্স করা দরকার। এটি করা ছায়া গাছের সেই উপাদানটির সাথে একটি সংযোগ তৈরি করে এবং বহিরাগতদের ছায়ার সীমানা অতিক্রম করার জন্য একটি নির্দিষ্ট গলি দেয়।

এখানে একটি কাস্টম স্লাইডার উইজেট তৈরি করার একটি উদাহরণ এবং কাউকে তার স্লাইডার থাম্ব নীল স্টাইল করার অনুমতি দেওয়া হল:

<style>
  #host::x-slider-thumb {
    background-color: blue;
  }
</style>
<div id="host"></div>
<script>
  var root = document.querySelector('#host').createShadowRoot();
  root.innerHTML = `
    <div>
      <div pseudo="x-slider-thumb"></div>' +
    </div>
  `;
</script>

CSS ভেরিয়েবল ব্যবহার করে

থিমিং হুক তৈরি করার একটি শক্তিশালী উপায় হবে CSS ভেরিয়েবলের মাধ্যমে। মূলত, অন্যান্য ব্যবহারকারীদের পূরণ করার জন্য "স্টাইল স্থানধারক" তৈরি করা।

একটি কাস্টম উপাদান লেখকের কল্পনা করুন যিনি তাদের ছায়া DOM-এ পরিবর্তনশীল স্থানধারক চিহ্নিত করেন। একটি অভ্যন্তরীণ বোতামের ফন্ট স্টাইল করার জন্য এবং অন্যটি এর রঙের জন্য:

button {
  color: var(--button-text-color, pink); /* default color will be pink */
  font-family: var(--button-font);
}

তারপরে, উপাদানটির এমবেডার সেই মানগুলিকে তাদের পছন্দ অনুসারে সংজ্ঞায়িত করে। সম্ভবত তাদের নিজস্ব পৃষ্ঠার সুপার কুল কমিক সান থিমের সাথে মেলে:

#host {
  --button-text-color: green;
  --button-font: "Comic Sans MS", "Comic Sans", cursive;
}

সিএসএস ভেরিয়েবল যেভাবে উত্তরাধিকারসূত্রে প্রাপ্ত হওয়ার কারণে, সবকিছুই পীচি এবং এটি সুন্দরভাবে কাজ করে! পুরো ছবিটি এই মত দেখায়:

<style>
  #host {
    --button-text-color: green;
    --button-font: "Comic Sans MS", "Comic Sans", cursive;
  }
</style>
<div id="host">Host node</div>
<script>
  var root = document.querySelector('#host').createShadowRoot();
  root.innerHTML = `
    <style>
      button {
        color: var(--button-text-color, pink);
        font-family: var(--button-font);
      }
    </style>
    <content></content>
  `;
</script>

স্টাইল রিসেট করা হচ্ছে

উত্তরাধিকারী শৈলী যেমন ফন্ট, রঙ এবং লাইন-উচ্চতা ছায়া DOM-এর উপাদানগুলিকে প্রভাবিত করে। তবে সর্বাধিক নমনীয়তার জন্য, ছায়া সীমারে কী ঘটবে তা নিয়ন্ত্রণ করতে Shadow DOM আমাদের resetStyleInheritance বৈশিষ্ট্য দেয়। একটি নতুন উপাদান তৈরি করার সময় তাজা শুরু করার উপায় হিসাবে এটিকে ভাবুন।

রিসেট স্টাইল ইনহেরিটেন্স

false - ডিফল্ট। উত্তরাধিকারসূত্রে পাওয়া CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে পাওয়া যায়।
true - উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যগুলিকে সীমানায় initial রিসেট করে।

নীচে একটি ডেমো রয়েছে যা দেখায় যে কীভাবে ছায়া গাছটি resetStyleInheritance পরিবর্তন করে প্রভাবিত হয়:

<div>
  <h3>Light DOM</h3>
</div>

<script>
  var root = document.querySelector('div').createShadowRoot();
  root.resetStyleInheritance = <span id="code-resetStyleInheritance">false</span>;
  root.innerHTML = `
    <style>
      h3 {
        color: red;
      }
    </style>
    <h3>Shadow DOM</h3>
    <content select="h3"></content>
  `;
</script>

<div class="demoarea" style="width:225px;">
  <div id="style-ex-inheritance"><h3 class="border">Light DOM</div>
</div>
<div id="inherit-buttons">
  <button id="demo-resetStyleInheritance">resetStyleInheritance=false</button>
</div>

<script>
  var container = document.querySelector('#style-ex-inheritance');
  var root = container.createShadowRoot();
  //root.resetStyleInheritance = false;
  root.innerHTML = '<style>h3{ color: red; }</style><h3>Shadow DOM<content select="h3"></content>';

  document.querySelector('#demo-resetStyleInheritance').addEventListener('click', function(e) {
    root.resetStyleInheritance = !root.resetStyleInheritance;
    e.target.textContent = 'resetStyleInheritance=' + root.resetStyleInheritance;
    document.querySelector('#code-resetStyleInheritance').textContent = root.resetStyleInheritance;
  });
</script>

DevTools উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্য

.resetStyleInheritance বোঝা কিছুটা জটিল, প্রাথমিকভাবে কারণ এটি শুধুমাত্র উত্তরাধিকারসূত্রে পাওয়া CSS বৈশিষ্ট্যের উপর প্রভাব ফেলে। এটি বলে: আপনি যখন পৃষ্ঠা এবং ShadowRoot-এর মধ্যবর্তী সীমানায় উত্তরাধিকারী হওয়ার জন্য একটি সম্পত্তি খুঁজছেন, তখন হোস্ট থেকে মান উত্তরাধিকারী করবেন না তবে পরিবর্তে initial মান ব্যবহার করুন (সিএসএস স্পেস অনুযায়ী)।

আপনি যদি নিশ্চিত না হন যে কোন বৈশিষ্ট্যগুলি CSS-এ উত্তরাধিকারসূত্রে পাওয়া যায়, এই সহজ তালিকাটি দেখুন বা এলিমেন্ট প্যানেলে "উত্তরাধিকারী দেখান" চেকবক্সটি টগল করুন৷

স্টাইল বিতরণ নোড

বিতরণ করা নোডগুলি এমন উপাদান যা একটি সন্নিবেশ বিন্দুতে রেন্ডার করে (একটি <content> উপাদান)। <content> উপাদানটি আপনাকে Light DOM থেকে নোড নির্বাচন করতে এবং আপনার ছায়া DOM-এর পূর্বনির্ধারিত অবস্থানে রেন্ডার করতে দেয়। তারা যৌক্তিকভাবে ছায়া DOM এ নেই; তারা এখনও হোস্ট উপাদানের সন্তান। সন্নিবেশ পয়েন্ট শুধু একটি রেন্ডারিং জিনিস.

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

::কন্টেন্ট সিউডো উপাদান

বিতরণ করা নোডগুলি হোস্ট উপাদানের সন্তান, তাই আমরা কীভাবে তাদের শ্যাডো ডমের মধ্যে থেকে লক্ষ্য করতে পারি? উত্তর হল CSS ::content pseudo element. এটি হালকা DOM নোডগুলিকে লক্ষ্য করার একটি উপায় যা একটি সন্নিবেশ পয়েন্টের মধ্য দিয়ে যায়। উদাহরণ স্বরূপ:

::content > h3 স্টাইল করে যে কোনো h3 ট্যাগ যা একটি সন্নিবেশ বিন্দুর মধ্য দিয়ে যায়।

আসুন একটি উদাহরণ দেখি:

<div>
  <h3>Light DOM</h3>
  <section>
    <div>I'm not underlined</div>
    <p>I'm underlined in Shadow DOM!</p>
  </section>
</div>

<script>
var div = document.querySelector('div');
var root = div.createShadowRoot();
root.innerHTML = `
  <style>
    h3 { color: red; }
      content[select="h3"]::content > h3 {
      color: green;
    }
    ::content section p {
      text-decoration: underline;
    }
  </style>
  <h3>Shadow DOM</h3>
  <content select="h3"></content>
  <content select="section"></content>
`;
</script>

সন্নিবেশ পয়েন্টে শৈলী রিসেট করা হচ্ছে

শ্যাডোরুট তৈরি করার সময়, আপনার কাছে উত্তরাধিকারসূত্রে পাওয়া শৈলীগুলি পুনরায় সেট করার বিকল্প রয়েছে। <content> এবং <shadow> সন্নিবেশ পয়েন্টগুলিতেও এই বিকল্প রয়েছে। এই উপাদানগুলি ব্যবহার করার সময়, JS-এ .resetStyleInheritance সেট করুন বা উপাদানটিতেই বুলিয়ান reset-style-inheritance অ্যাট্রিবিউট ব্যবহার করুন।

একটি ShadowRoot বা <shadow> সন্নিবেশ পয়েন্টগুলির জন্য: reset-style-inheritance মানে উত্তরাধিকারযোগ্য CSS বৈশিষ্ট্যগুলি হোস্টে initial হিসাবে সেট করা হয়, সেগুলি আপনার ছায়ার বিষয়বস্তুকে আঘাত করার আগে। এই অবস্থানটি উপরের সীমানা হিসাবে পরিচিত ।
<content> সন্নিবেশ পয়েন্টগুলির জন্য: reset-style-inheritance মানে উত্তরাধিকারযোগ্য CSS বৈশিষ্ট্যগুলি সন্নিবেশ পয়েন্টে হোস্টের বাচ্চাদের বিতরণ করার আগে initial হিসাবে সেট করা হয়। এই অবস্থানটি নিম্ন সীমানা হিসাবে পরিচিত ।

উপসংহার

কাস্টম উপাদানগুলির লেখক হিসাবে, আমাদের সামগ্রীর চেহারা এবং অনুভূতি নিয়ন্ত্রণ করার জন্য আমাদের কাছে প্রচুর বিকল্প রয়েছে৷ ছায়া DOM এই সাহসী নতুন বিশ্বের ভিত্তি গঠন করে।

শ্যাডো DOM আমাদেরকে স্কোপড স্টাইল এনক্যাপসুলেশন দেয় এবং আমরা যতটা বাছাই করি ততটা (বা যতটা কম) বাইরের জগতে প্রবেশ করিয়ে দেওয়ার একটি উপায়। কাস্টম সিউডো উপাদান সংজ্ঞায়িত করে বা CSS পরিবর্তনশীল স্থানধারক সহ, লেখকরা তাদের বিষয়বস্তুকে আরও কাস্টমাইজ করার জন্য তৃতীয় পক্ষের সুবিধাজনক স্টাইলিং হুক প্রদান করতে পারেন। সর্বোপরি, ওয়েব লেখকরা তাদের বিষয়বস্তু কীভাবে উপস্থাপন করা হয় তার সম্পূর্ণ নিয়ন্ত্রণে থাকে।