Styling UI5 Web Components

UI5 Web Components use Shadow DOM for encapsulation. Styles are isolated — external CSS won't leak in, but customization requires specific techniques. There are five approaches, ordered from most recommended to least.

1. Styles on Tag Level

Some components (Title, Label, Tag, Button, Input, and others) are designed so that styles set directly on the custom element take effect.

ui5-input {
  width: 150px;
  color: yellow;
  background: purple;
}

This works for simpler components. For complex components with deep DOM structures, tag-level styling has no effect on internal elements.

Best practice: Always use tag-level styling for sizing properties (margin, padding, width, height) to avoid design inconsistencies.