In a css file of an asp.net Blazor app when I use ::deep VS emits a warning "Validation (CSS 4.0): "::deep" is not a valid pseudo-element." That might be true for regular CSS, but not in the context of a Blazor app.
Is there a way to suppress it? Right-click -> Suppress -> In File / In Source do nothing.
You can add deep to the vendor specific extensions.
I've added it to the Microsoft extension and it works.
Open with an editor (in Administrator mode) the file:
C:\Program Files (x86)\Microsoft Visual Studio\2019\<your version>\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\CSS\1033\css-vendor-ms.xml
Go to line ~69 and add the following code:
<CssPseudo name="::deep"
_locID="ms-browse-pseudo-element"
_locAttrData="description"
version="3.0"
browsers="IE11"
description="Blazor child component support."
standard-reference="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0"/>
Restart Visual Studio.
Now I can see the source code as:
For Resharper users, editing the css-vendor-ms.xml is needed but does not completely solve the issue. Resharper will continue to highlight ::deep elements as errors in your solution. This is currently a known bug, which will hopefully be resolved in a future build.
As a work around, go to Resharper Options --> Code Inspection --> Inspection Severity --> CSS --> Potential Code Quality Issues --> Unknown CSS symbol and drop the severity to Warning (or lower).
This has now been fixed as of the latest preview version of Visual Studio 2022:
https://developercommunity.visualstudio.com/t/Support-::deep-in-razorcss-CSS-isolati/1623976
I just downloaded 17.3 and my project is now down to zero warnings again! Look forward to it being released properly.