Compact Mode: applying compact class or data-attribute on host no longer applies compact sizing

Bug Description

Since v2.28.1, applying the ui5-content-density-compact class directly on a web component host element no longer triggers compact sizing.

AI analysis:
Before v2.28.1 (PR #14140 (dee7ae0)), the PostCSS build step compiled @container style(--ui5_content_density: compact) rules into :host(.ui5-content-density-compact) selectors, so applying the class to the host element itself worked. With native CSS container style queries now used directly, this no longer works: by CSS spec, @container style() only matches containing ancestor elements — the element is never its own container. This means --ui5_content_density: compact being set on the host is invisible to the container query running inside that same host's shadow DOM.

Both a host-applied element and an ancestor-wrapped element have --ui5_content_density: compact correctly present in computed styles, but only the ancestor case renders at compact height.

The data-ui5-compact-size attribute has the same problem, as it uses the same selector in SystemCSSVars.

Affected Component

No response

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/github-krffavjg-5vhxt13c?file=package.json,index.html

Steps to Reproduce

Go to StackBlitz
See that both buttons apply "Cozy" sizing, although one has ui5-content-density-compact class

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.28.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

I’m not disclosing any internal or sensitive information.

This issue has been closed. To reopen, just leave a comment!

🎉 This issue has been resolved in version v2.29.0-rc.0 🎉

The release is available on v2.29.0-rc.0

Your semantic-release bot 📦🚀

Hi Team, just a quick heads-up on this issue in case you want to get rid of the (now reverted) PostCSS workaround again. We run an MFE setup, and there a mismatch can happen between --_ui5_content_density and --ui5_content_density: if the runtime that owns the document theme is older than one of the micro apps, that app's components read the new name while only the old one is set - so compact gets ignored for them.

We've added a temporary workaround for this:

    <style>
      [data-ui5-compact-size],
      .ui5-content-density-compact,
      .sapUiSizeCompact {
        --ui5_content_density: compact;
      }
    </style>

This issue has been closed. To reopen, just leave a comment!

Navigation Menu

Repository navigation

Compact Mode: applying compact class or data-attribute on host no longer applies compact sizing #14194

Bug Description

Affected Component

Expected Behaviour

Isolated Example

Steps to Reproduce

Log Output, Stack Trace or Screenshots

Priority

UI5 Web Components Version

Browser

Operating System

Additional Context

Organization

Declaration

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Compact Mode: applying compact class or data-attribute on host no longer applies compact sizing #14194

Description

Bug Description

Affected Component

Expected Behaviour

Isolated Example

Steps to Reproduce

Log Output, Stack Trace or Screenshots

Priority

UI5 Web Components Version

Browser

Operating System

Additional Context

Organization

Declaration

Activity

github-actions commented on Oct 26, 2026

sap-ui5-webcomponents-release commented on Oct 30, 2026

Lukas742 commented on Nov 2, 2026

github-actions commented on Nov 2, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions