fix(ui5-li-custom): correct padding for ListItemCustom #11487
Conversation
This change addresses an issue with padding styles in the ListItem component, ensuring consistent and accurate layout. Fixes: #11480
| padding-inline: 0 1rem; | ||
| } | ||
|
|
||
| :host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root { | ||
| :host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root, |
There was a problem hiding this comment.
Why is the [ui5-li] selector needed here?
Including this selector allows the parent class to be aware of its child components. However, this approach has a downside: the corresponding CSS will be bundled with all components that extend the ListItem class, even though these selectors may never match in those contexts. This seems unnecessary and potentially inefficient. Please reconsider and revise the implementation accordingly, as the current setup appears conceptually flawed.
There was a problem hiding this comment.
The selector is currently there to enforce stronger CSS specificity, but I agree it’s worth exploring if we can achieve the same effect with a cleaner setup. I’ll see what can be done to optimize it.
This change addresses an issue with padding styles in the ListItemCustom component, ensuring consistent and accurate layout.
Fixes: #11480