Skip to content

fix(web-components): defer fallback custom-state attributes - #36722

Open
Sylvester Kaczmarek (sylvesterkaczmarek) wants to merge 1 commit into
microsoft:masterfrom
sylvesterkaczmarek:fix/5262-defer-fallback-state
Open

fix(web-components): defer fallback custom-state attributes#36722
Sylvester Kaczmarek (sylvesterkaczmarek) wants to merge 1 commit into
microsoft:masterfrom
sylvesterkaczmarek:fix/5262-defer-fallback-state

Conversation

@sylvesterkaczmarek

@sylvesterkaczmarek Sylvester Kaczmarek (sylvesterkaczmarek) commented Sep 10, 2026

Copy link
Copy Markdown

Previous Behavior

The attribute fallback for CSS custom states mutates the host during construction. With :state() unsupported, document.createElement('fluent-tablist') fails because the constructor adds state--horizontal before returning.

New Behavior

Queue fallback attribute changes through FAST's DOM update queue. This keeps construction attribute-free and preserves toggle/swap ordering, including state changes before connection. The native ElementInternals.states path is unchanged.

Adds three browser regressions and a patch change file. This fixes the shared web-components implementation; Blazor will need the resulting package release.

Validation

  • All three new fallback regressions fail before the fix and pass afterward.
  • Chromium tablist suite: 24 passed, 1 existing failure. The same disabled-tab selection test also fails on pristine upstream source (21 passed, 1 failed), without either code or test changes.
  • Checkbox, divider, and progress-bar suites: 46 passed.
  • Library and test TypeScript checks, plus Prettier checks: passed.

Tests used the repository's FAST browser harness through focused Nx targets, Playwright 1.56.1 and cached Chromium build 1208. Firefox, WebKit, and the full monorepo suite were not run.

Related Issue

Addresses microsoft/fluentui-blazor#5262.

The consumer issue was closed during implementation because older Chrome versions are outside Blazor's support policy. The maintainer nevertheless explicitly welcomed a contribution fixing the fallback: microsoft/fluentui-blazor#5262 (comment).

@KrystofZacek

Copy link
Copy Markdown

Very well. Thanks!

Comment thread packages/web-components/src/tablist/tablist.spec.ts
@KrystofZacek

Copy link
Copy Markdown

Just a remark: isn't textarea affected by the same problem too?

@sylvesterkaczmarek

Copy link
Copy Markdown
Author

Yes. textarea uses the same shared fallback: autoResizeChanged() calls toggleState(), and resizeChanged() calls swapStates()/toggleState() during initialization. This PR fixes the shared element-internals fallback, so textarea is covered as well; tablist is just the regression reproducer used here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants