用途：说明 UI5 Web Components 的样式定制方法。由于组件使用 Shadow DOM 封装，外部 CSS 不会渗入，需采用特定技术。资料给出五种方式，按推荐程度从高到低排列。
主要能力与用法：一、标签级样式，部分组件（Title、Label、Tag、Button、Input 等）可直接在自定义元素上设置样式，如 ui5-input { width: 150px; color: yellow; background: purple; }；尺寸属性（margin、padding、width、height）建议始终用此方式。二、CSS Shadow Parts，复杂组件将内部元素暴露为 part，如 ui5-card-header::part(status) { color: red; }；仅文档中列出的 part 稳定，具体见各组件 API 参考的 Overview 部分。三、CSS 自定义状态，通过 :state() 伪类按内部状态设置样式，如 ui5-toolbar-item:state(overflowed) { flex-direction: column; }；可用状态同样见 API 参考。四、覆盖 CSS 变量，组件使用 SAP 变量（--sap*）实现主题，可按组件或作用域覆盖，如 ui5-button { --sapButton_TextColor: purple; }；全局变量定义在 @sap-theming/theming-base-content，大范围主题改动建议用 UI Theme Designer。五、addCustomCSS 作为最后手段，向 shadow DOM 注入 CSS，需在组件实例创建前注册，例如 import { addCustomCSS } from "@ui5/webcomponents-base/dist/Theming.js"; addCustomCSS("ui5-select", .ui5-select-root { background-color: red; })。
限制与禁忌：不要使用已废弃的 >>> 或 /deep/ 选择器；不要依赖未文档化的内部 DOM 结构，因其可能随版本变化；不要在 SAP 变量上使用 !important，应限定作用域；存在 SAP 变量时不要覆盖原始颜色。addCustomCSS 针对可能变化的内部结构，仅在前述方式无法实现时使用。