Is there a way to pass CSS class in isolated mode?

Question

Let's say I am building composite component, and part of it is:

  <InputNumber class="testing" ...

When "testing" is global CSS class name it works fine, but if it is local to my component, because of CSS isolation it won't work.

So my question is -- is there a way to make the second scenario work too? I.e. keep CSS class definition local (isolated) and yet pass to child component? In "extreme" case is there a way to share it -- that is, use this class both in my component and in child one as well?

Answer 1

It works when you put a <div> around it and add ::deep to the style:

MyComponent.razor

<div>
 
  ...
  <InputNumber class="testing" ... />

</div

MyComponent.razor.css

::deep .testing {
  ...
}

but i have no clue as to why the <div> is needed.