استفاده از متغیرهای CSS در قالب‌های سفارشی یا المان‌های سفارشی در وب کامپوننت‌ها

آشنایی با وب کامپوننت‌ها و متغیرهای CSS

در دنیای توسعه وب و طراحی رابط کاربری، استفاده از وب کامپوننت‌ها به عنوان راهکاری برای ایجاد کدهای قابل استفاده مجدد و سفارشی‌سازی شده بسیار محبوب شده است. در این میان، متغیرهای CSS یکی از ابزارهای قدرتمند زبان CSS هستند که به طراحان و توسعه‌دهندگان امکان ایجاد سبک‌های پویا و تمیز را می‌دهند.

وب کامپوننت‌ها چیستند؟

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

متغیرهای CSS و کاربرد آن‌ها

متغیرهای CSS که به نام‌های CSS Custom Properties نیز شناخته می‌شوند، این امکان را برای طراحان فراهم می‌کنند تا مقادیر ثابت یا پویا را در استایل صفحات خود ذخیره کنند و از آن‌ها در تمامی المان‌های صفحه استفاده کنند. این قابلیت علاوه بر سادگی در تغییر استایل‌ها، به بهینه‌سازی و نگهداری کدها نیز کمک می‌کند.

استفاده از متغیرهای CSS در وب کامپوننت‌ها

زمانی که بخواهید از متغیرهای CSS در المان‌های سفارشی یا وب کامپوننت‌ها استفاده کنید، باید در نظر داشته باشید که دامنه (scope) استفاده از این متغیرها بسیار اهمیت دارد. در اینجا، می‌خواهیم چگونگی استفاده از این متغیرها را توضیح دهیم:

    <template id="my-template">
      <style>
        :host {
          --bg-color: #f3f3f3;
        }
        div {
          background-color: var(--bg-color);
        }
      </style>
      <div>Hello, Web Component!</div>
    </template>
    <script>
      class MyComponent extends HTMLElement {
        constructor() {
          super();
          const template = document.getElementById('my-template').content;
          const shadowRoot = this.attachShadow({ mode: 'open' });
          shadowRoot.appendChild(template.cloneNode(true));
        }
      }
      customElements.define('my-component', MyComponent);
    </script>
  

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

<template id="my-template">
در اینجا ما یک قالب (template) تعریف کرده‌ایم که دارای شناسه‌ای یکتاست.
<style>
استایل‌های این کامپوننت را درون این تگ تعریف خواهیم کرد تا طراحی خاص برای آن تنظیم کنیم.
:host
میزبان یا میزبان ظاهری متغیر CSS را در خود دارد که به دامنه خاص این کامپوننت اعمال می‌شود.
--bg-color: #f3f3f3;
متغیر CSS تعریف شده با نام bg-color که رنگ پس‌زمینه را مشخص می‌کند.
background-color: var(--bg-color);
این دستور به المان div می‌گوید که از مقدار متغیر bg-color استفاده کند تا رنگ پس‌زمینه را تنظیم کند.
class MyComponent extends HTMLElement
یک کلاس جدید برای المان سفارشی ما است که از HTMLElement وراثت می‌کند.
const template = document.getElementById('my-template').content;
این خط محتوای قالب ما را انتخاب و clone خواهد کرد تا از تکرار آن در سایه (shadow DOM) استفاده کند.
this.attachShadow({ mode: 'open' });
سایه‌ای جدید برای این المان ایجاد می‌کند تا استایل‌ها و محتوای خاص خودش را دارا باشد.
customElements.define('my-component', MyComponent);
در نهایت، این خط، المان جدید را به عنوان یک کامپوننت سفارشی در مرورگر تعریف می‌کند.