یک نکتهی تکمیلی: امکان نوشتن فایلهای CSS اختصاصی کامپوننتها در برنامههای Blazor
در نکتهی قبلی، در مورد JavaScript Isolation بحث شد؛ یک چنین قابلیتی در مورد فایلهای css. هم وجود دارد و جزو تازههای Blazor 5x است. در این حالت (CSS Isolation) میتوان شیوهنامهای را تهیه کرد که تنها مختص به یک کامپوننت است و بر روی سایر کامپوننتها تاثیری ندارد. این قابلیت نیاز به کدنویسی خاصی نداشته و به سادگی قابل استفادهاست: در این حالت اگر کامپوننتی برای مثال Counter.razor نام دارد، برای ایجاد فایل css مختص به آن، تنها کافی است در کنار فایل آن، فایل Counter.razor.css را ایجاد و تکمیل کرد. به این ترتیب هر شیوهنامهای که در این فایل تنظیم شود، فقط بر روی کامپوننت Counter تاثیرگذار خواهد بود؛ حتی اگر از این کامپوننت در کامپوننتهای دیگر نیز استفاده شود.
برای نمونه شیوهنامهی فوق تنها به المان h1 کامپوننت Counter اعمال میشود و هیچ تاثیری را بر روی سایر کامپوننتهای برنامه نخواهد داشت:
همانطور که مشاهده میکنید، در زمان build برنامه، تمام این شیوهنامههای اختصاصی کامپوننتهای مختلف برنامه، تبدیل به یک فایل خواهند شد (با نام project_name.styles.css) که توسط ویژگیهای HTML ای که به صورت خودکار تولید میشوند، از یکدیگر متمایز خواهند شد.
اگر علاقمند باشیم تا این شیوهنامه به فرزندان کامپوننت Counter نیز به ارث برسد، باید از روش زیر استفاده کرد (استفاده از deep combinator):