امروز میخواستم با یک selector به اسم :host-context کار کنم. ولی متوجه شدم روی فایرفاکس کلا پشتیبانی نمیشه. برای همین تصمیم گرفتم یک مقاله در موردش بنویسم.
شبهکلاس :host-context() بخشی از Web Components و Shadow DOM است، اما پشتیبانی آن در مرورگرها یکدست نیست. بهخصوص در Firefox، :host-context() برای مدت طولانی پشتیبانی نشده و در بسیاری از سناریوها هنوز قابل اتکا نیست.
مثلاً اگر چنین چیزی دارید:
ممکنه در Chrome کار کند ولی در Firefox اعمال نشه.
به جای:
از:
استفاده کنید و کلاس رو مستقیماً روی کامپوننت قرار دهید:
روی والد:
و داخل Shadow DOM:
متغیرهای CSS از Shadow Boundary عبور میکنند و این روش معمولاً بهترین جایگزین برای :host-context() است.
اگر باید وضعیت والد را تشخیص دهید:
و در CSS:
