Element Part of a Component

Element refers to a set of HTML elements composing the functional part of a component. Everything related to a component’s content and its appearance happens inside this part of the component’s structure.

Element Structure Basics

The Element structure differs drastically depending on the component. It may consist of only one HTML tag for most basic components like the Label or, like the Event Log, may have many layers of complexity to their markup caused by their functionality, the nature of represented data, or by different states a component could be in.

The only markup feature shared across all of them is that the Element part of each component on the dashboard has a component-{componentName} class in its root tag among others. The dynamic part is the name of the component written in camel case (e.g. component-systemTree).

Despite the fact that up from the start things vary a lot here, there are still some regularities to notice while working with web component styles:

  • Styles written in the Element CSS Style property apply to the first tag/wrapper of the functional part of the component inside the group of the Container part’s elements by default

  • Each component type has its own set of classes in almost every HTML tag it is composed of. Some of them are always present and others show up depending on a condition or a component state

  • You should ignore the unreadable automatically generated classes like sc-hhOBVt or iIsGzI when writing CSS selectors since those classes could change on the next dashboard load

  • Components that have similar features, like a toolbar or a dropdown part to select values from, usually share the essential markup of those parts and the way their styles are written

  • Majority of the simpler components that are embedded into more complex ones, like the Text Field in the Data Table ’s toolbar, are the same as their standalone versions.

Get more useful information on common markup structures inside web components in the other articles of this section.

Was this page helpful?