آموزش سِلِکتور :host در CSS

سِلِکتور :host یکی از مباحث جذاب و مهم در CSS است، خصوصاً وقتی که با وب کامپوننت‌ها سروکار داریم. اگر تا به حال با وِب کامپوننت‌ها کار کرده باشید، حتماً می‌دانید که یکی از چالش‌های اصلی، نحوه استایل‌دهی به آنهاست. در حالت عادی، ویب کامپوننت‌ها در یک سند مجزا و با یک سایه دام (Shadow DOM) خود استایل دهی می‌شوند که باعث ایزوله شدن استایل آنها می‌شود. اما سِلِکتور :host به ما اجازه می‌دهد که این استایل‌ها را در خود کامپوننت تغییر دهیم.

به‌طور کلی، سِلِکتور :host برای هدف‌گیری ریشه‌ی سایه دام استفاده می‌شود و این امکان را می‌دهد تا اجزای سفارشی که ایجاد کرده‌اید را به روشی زیبا و کاربرپسندتر طراحی کنید. بگذارید مثالی بزنیم تا بهتر این موضوع را درک کنید. تصور کنید که ما یک کامپوننت سفارشی برای نمایش کارت پروفایل کاربرها داریم و می‌خواهیم برخی از ویژگی‌های استایل آن را تغییر دهیم.

برای درک بهتر سِلِکتور :host، بیایید نگاهی به یک مثال ساده بیاندازیم. در وب کامپوننت‌هایی که ایجاد می‌کنید، سورس کدهای CSS می‌توانند از خارج انگشت نشان شوند. :host برای اعمال این استایل‌ها به سَرس طلایی کامپوننت استفاده می‌شود و می‌توانید تغییری در استایل کامپوننت‌ها ایجاد کنید که به‌طور جداگانه از شَبَکه‌ی سایه دام و DOM اصلی اعمال شود.

این روش به ما امکان می‌دهد تا اجزای بسیار سفارشی با استایل‌های منحصر به فرد و کاربردی ایجاد کنیم که علاوه بر زیبا بودن، کاربردی نیز هستند و می‌توان از آنها در پروژه‌های مختلف استفاده کرد. اجازه دهید به کد نمونه‌ای بپردازیم تا کاملا این موضوع را برای شما روشن کنیم.

نمونه کد

<template>
  <style>
    :host {
      display: block;
      background-color: #f1f1f1;
      padding: 16px;
      border-radius: 10px;
    }
  </style>
  <div>
    <p>This is a custom element.</p>
  </div>
</template>

توضیح خط به خط کد