When using UI eXtension themes, often you can carry out all your styling by simple CSS targeting on the hosts class type. For example, see Styling Home Assistant 2026.3 energy now badges which uses a CSS target of :host(.type-power-total). However this will not work if you need to target an element directly in shadow root to target a property that is not styled with a CSS variable, or to inject keyframes into an element’s light DOM.

Continuing to use the power now badge on the built-in energy dashboard, the example below will change the border of the badge to double. This can only be done by styling in shadow root as the .badge class styling does not expose a CSS variable for border-style. Border color and width are styled on :host(.type-power-total) on the root element styling key .:, showing a good example of using both root and specific yaml keys with UIX yaml selection.

Host/element path selector

Applying this guide uses the & Host/element path selector

Badge Theme:
  uix-theme: Badge Theme
  uix-badge-yaml: |
    .: |
      :host(.type-power-total) {
        --ha-card-border-width: 3px;
        --ha-card-border-color: red;
      }
    "&.type-power-total ha-badge $": |
      .badge {
        border-style: double !important;
      }

Styled power now badge

Styled power now badge