سلام دوستان عزیز! امروز قراره در مورد یک ویژگی خاص در CSS به نام شبه‌المان ::slotted صحبت کنیم. این ویژگی زمانی به کار میاد که از Web Components و Shadow DOM استفاده می‌کنید. شبه‌المان ::slotted در واقع به ما امکان میده تا استایل‌های خاصی رو به المان‌هایی که داخل یک اسلات قرار گرفتن، اعمال کنیم.
شاید بپرسید که این ویژگی چه کاربردی داره؟ خب، فرض کنید که شما یه عنصر شخصی‌سازی‌شده (Custom Element) تعریف کردید و می‌خواهید محتویات مختلفی رو به عنوان فرزند بهش اضافه کنید. با استفاده از ::slotted می‌تونید به اون محتویاتی که داخل اسلات قرار گرفتن، به راحتی استایل بدید.
در حقیقت، ::slotted به شما اجازه میده تا ساختار و استایل عناصر داخلی یک کامپوننت رو به نحوی بهینه‌سازی کنید که دسترسی راحت و قابل کنترل‌تری داشته باشند، بدون اینکه نیاز باشه به ساختار کامل Shadow DOM دست بزنید.
در واقع، این ویژگی به عنوان پلی بین دنیای داخلی Shadow DOM و دنیای بیرونی HTML عمل می‌کنه و این امکان رو فراهم می‌کنه که استایل‌های خارج از کامپوننت رو به نحو خاصی به المان‌های داخلی اعمال کنید.
تو ادامه یه مثال ساده خواهیم زد که بیشتر با کاربرد ::slotted آشنا بشید.
<template id="my-template">
<style>
::slotted(span) {
color: blue;
font-weight: bold;
}
</style>
<slot></slot>
</template>
<my-element>
<span>Hello, World!</span>
</my-element>حالا بیاین خط به خط کد رو توضیح بدیم:
<template id="my-template"> – این خط یه قالب HTML تعریف می‌کنه که ازش قراره توی شادودوم استفاده بشه.
<style> – اینجا ما استایل‌های مخصوص رو تعریف می‌کنیم.
::slotted(span) – این خط میگه هر span که توی اسلات قرار می‌گیره باید این استایل‌ها رو بگیره.
color: blue; – رنگ متن رو آبی می‌کنه.
font-weight: bold; – متن رو پررنگ می‌کنه.
<slot></slot> – اسلاتی برای درج محتوای خارجی.
<my-element></my-element> – المانی که قرار محتوای دلخواه ما داخلش باشه.
<span>Hello, World!</span> – محتوایی که به اسلات درج شده و استایل‌هاش از ::slotted گرفته میشه.