2

I don't know how exactly this new feature must be work in Blazor, but I think that the current implementation work wrong. Below some typical situation:

Layout for some blazor component:

<button>
  <span>Some Text</span>
  <Icon> ... </Icon>
</button>
  1. source scss file ...

source scss file

  1. that will be translated in to something like ...

that will be translated in to something like

  1. after apply of CSS isolation we have :-( ...

after apply of CSS isolation we have :-(

  1. Why NOT THIS????

Why NOT THIS?

And of course in DOM after rendering we have only button with scope id "b-l4md7xqlo6", but not span itself! Span don't have this attribute, and in my situation I don't need it. In other words, after applying of scope id, the result CSS not equal exactly to my declared CSS!

Any ideas?

Thanks, Nikolai

Nikolai Egipko
  • 63
  • 6
  • 1
    In my experience, even with profligate use of `::deep`, CSS isolation seems buggy to me. I haven't bothered creating minimal examples or filing tickets though. – Kirk Woll Mar 03 '21 at 15:36
  • How ::deep can help me in this situation? More difficult situation with dynamic content in button of this example. When we have inside something like @ChildContent and in this content exist some span's, then our style will not be applied to these spans :-(. – Nikolai Egipko Mar 03 '21 at 15:50
  • Sorry, my comment was intended as commentary; I agree with you. However, can you post a screenshot of your developer tools that illustrate the `button` element having the identifier, but the `span` not having it? I think it would help drive home your point. – Kirk Woll Mar 03 '21 at 15:56
  • 2
    This is probably better raised as an issue on the [aspnetcore GitHub](https://github.com/dotnet/aspnetcore). – Lex Mar 03 '21 at 18:30
  • My Button look like In @ChildContent later on runtime dynamically can be added some other elements and also spans. These spans not part of Button Blazor component itself, but I need place all spans inside of the Button with appropriate styles. The are another situation, for example one div as root element and another div as child. After "applying" of wrong CSS isolation the browser interpreted styles and copied styles from parent div to child div also. – Nikolai Egipko Mar 04 '21 at 08:07

0 Answers0