معرفی CSS Shadow Parts
CSS Shadow Parts یکی از ویژگی‌های جذاب CSS است که به شما اجازه می‌دهد تا استایل‌دهی به اجزای داخلی Shadow DOM را ممکن کند. این ویژگی به خصوص در توسعه‌ی Web Components مفید است، جایی که ما غالباً نیاز داریم به اجزای داخلی کنترل کنیم و استایل بدهیم.
در حالت کلی، Shadow DOM به شما اجازه می‌دهد تا یک فضای DOM مجزا برای یک عنصر HTML ایجاد کنید. این فضای مجزا تمامی استایل‌های موجود در صفحه را منزوی کرده و تضمین می‌کند که هیچ کدام از استایل‌های بیرونی به درون این فضای مجزا تأثیر نخواهد داشت. با این حال گاهی اوقات نیاز است که به برخی از اجزای Shadow DOM دسترسی داشته باشیم و به آنها استایل دهیم.
با CSS Shadow Parts می‌توانیم به صورت انتخابی به اجزای مشخصی درون Shadow DOM دسترسی داشته باشیم و استایل دهیم. برای انجام این کار، باید از ویژگی `
` در HTML استفاده کنیم و سپس در CSS، قسمت‌های مربوطه را هدف قرار دهیم.
استفاده از Shadow Parts بسیار ساده است. ابتدا، باید اجزای داخلی درون Shadow DOM را با استفاده از صفت `part` علامت‌گذاری کنیم. سپس می‌توانیم با استفاده از دستور `::part` در CSS به آنها استایل دهیم. این تکنیک به ما قدرت بیشتری در سفارشی‌سازی و مدیریت استایل‌ها ارائه می‌دهد، در حالی که همچنان از ایمنی ایزوله سازی Shadow DOM بهره می‌بریم.
این ویژگی به خصوص برای زمانی که می‌خواهیم اجزای باز استفاده‌پذیر بسازیم و در پروژه‌های مختلف بهره ببریم، بسیار مفید است.
در ادامه مثال عملی از استفاده از CSS Shadow Parts را مشاهده می‌کنیم:
<template id="myTemplate">
<style>
::part(button) {
background-color: blue;
color: white;
}
</style>
<button part="button">Click Me</button>
</template>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const template = document.getElementById('myTemplate').content;
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.cloneNode(true));
}
}
customElements.define('my-button', MyButton);
</script>
<my-button></my-button>
<template id="myTemplate">: با استفاده از این تگ، یک تمپلیت ایجاد می‌کنیم که قرار است در شَدو دام استفاده شود.
<style>: داخل این قسمت استایل‌های مورد نظر برای قسمت‌هایی که با صفت part علامت‌گذاری کرده‌ایم، تعریف می‌شود.
::part(button): با استفاده از این سِلتور خاص از CSS، به عنصر که دارای صفت part="button" است دسترسی پیدا کرده و استایل تعریف می‌کنیم.
class MyButton extends HTMLElement: کلاس جدیدی که از HTMLElement مشتق می‌شود و با کمک آن می‌خواهیم یک عنصر سفارشی بسازیم.
attachShadow({mode: 'open'}): این خط از کد یک شَدو دام جدید ایجاد می‌کند و به آن محتوای تمپلیت پیوست می‌کند.
