No style isolation?

Unity Engine
,
1

Unity 2023.2.8f1.

Have the following UI tree-structure - see the image below. Uppermost VisualElement and two templated elements as its childs. Each element (parent and children) has its own style “container” defined at a separate style sheet (VisualElement has its own style sheet, and template has its own style sheet also). It seems like styles in the direct hierarchy (not in the parallel branches) conflict with each other.

9782649--1403019--upload_2024-4-20_14-54-45.png
9782649--1403019--upload_2024-4-20_14-54-45.png709×171 26.7 KB

Here are the styles - first one is for uppermost VisualElement, second one is for the template - remember, they are defined at different style sheets (files), and here I just show them in the same code snippet

.container {
    flex-direction: column;
    align-items: flex-end;
    background-color: rgba(0, 115, 133, 0.26);
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.container {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

For the following results are observed:

  • The upper “container” adds background-color to the lower one, even if there is no background-color in the lower one.
  • Values for the same style property (like align-items or flex-direction) are overriden in the lower “container”.
  • But not all values - for example, margins in the lower “container” are 0, even if they are 5px in the upper one.

So, I see no solid rule here. Some properties are overridden in the lower elements, some not. Only one thing stays clear here - the styles with the same name within the same hierarchy branch conflict with each other. So, there is no style isolation within the same visual tree branch in Unity’s UI Toolkit for today?

2

In such situation I get sometimes two styles with the same names, but different content, if I open a uxml file in UI Builder.

9782673--1403022--upload_2024-4-20_15-3-25.png

The first “container” is defined at the style sheet for CharacterStatNames.uxml, the second one comes from nowhere. And it is not possible to detect, which one is the first, which - second. Because sometimes the second one appears before, sometimes after the first one. So, to investigate both styles ia the only possibility to distinguish them. Perhaps, these are the styles that influence the element being edited. And these styles are collected from all the elements within the same visual tree branch according to the name “container”. Unclear logic of how styles work here…

It seems like, it is better to keep style names purely unique. But it requires to construct such monstrous names like “main-character-replenishable-stat-value-container”.

3

So, after this, it seems like there is no style isolation in Unity like it is in Blazor, for example. (And I think it is not possible without generating an unique id for each component.) So, the unique style names, which makes them very bulky, is the only solution for now.