Skip to content

fix(web-components): harden component lifecycle for SSR/DSD hydration scenarios #35838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
radium-v wants to merge 45 commits into
base: master
Choose a base branch
from
Open

fix(web-components): harden component lifecycle for SSR/DSD hydration scenarios #35838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
571b8c6
fix(anchor-button): ensure tabIndex is set when connected
radium-v Apr 3, 2026
b2956d8
fix(avatar): move initials generation out of template
radium-v Apr 3, 2026
8866c4f
refactor(badge): streamline tests for appearance, color, size, and sh…
radium-v Apr 3, 2026
cdb0c08
fix(button): update buttonTemplate to use BaseButton type
radium-v Apr 3, 2026
84d225c
fix(button): improve disabled state handling and tabindex management
radium-v Apr 3, 2026
1c150b0
fix(dialog): enhance typeChanged method for better role and aria-moda…
radium-v Apr 3, 2026
5d28c62
fix(dropdown): replace Updates.enqueue with requestIdleCallback and r…
radium-v Apr 3, 2026
49cdc5c
fix(listbox): enhance slot handling and add defaultSlot reference
radium-v Apr 3, 2026
f4c2bf9
fix(menu): improve slottedMenuList handling and optimize setComponent…
radium-v Apr 3, 2026
b7a27ef
fix(option): update condition for setting form value and aria-selecte…
radium-v Apr 3, 2026
205b090
fix(progress-bar): refactor thickness, shape, and validationState tes…
radium-v Apr 3, 2026
5b1077d
fix(progress-bar): add null checks for elementInternals in value, min…
radium-v Apr 3, 2026
3521066
feat(typings): add isCustomElement type guard for custom element tag …
radium-v Apr 3, 2026
dc12dbf
feat(radio): add isRadio function to determine radio element validity
radium-v Apr 3, 2026
9bc2ba0
fix(radio): ensure template is set before assertions in radio tests
radium-v Apr 3, 2026
979ed71
fix(radio-group): ensure template is set before assertions and improv…
radium-v Apr 3, 2026
406c630
feat(radio-group): enhance slot handling and add slottedRadios observ…
radium-v Apr 3, 2026
beb763a
fix(rating-display): add observable for iconSlot and handle slot changes
radium-v Apr 3, 2026
56119fd
test(slider): add test to prevent value change when dragging inside a…
radium-v Apr 3, 2026
a9f1dcd
fix(slider): improve disabled state handling and update related methods
radium-v Apr 3, 2026
55a34cb
feat(tab): enhance accessibility by setting role and aria attributes,…
radium-v Apr 3, 2026
3eb6e4b
fix(tablist): improve tabsChanged method to handle previous and next …
radium-v Apr 3, 2026
e6d51ee
test(text): refactor tests to streamline property checks for block, s…
radium-v Apr 3, 2026
721977a
fix(text-input): enhance control label visibility and validity handling
radium-v Apr 3, 2026
9f80428
fix(textarea): improve connectedCallback handling
radium-v Apr 3, 2026
7c10c5d
fix(tree): enhance default slot handling and improve connectedCallbac…
radium-v Apr 3, 2026
22a00da
fix(tree-item): enhance itemSlot change handling and improve tabindex…
radium-v Apr 3, 2026
36a19f2
fix(focusable-element): enhance ARIA disabled element check to includ…
radium-v Apr 3, 2026
6bc84e2
fix(fast-fixture): enhance fixture options and stability handling for…
radium-v Apr 3, 2026
9cea1f6
update docs
radium-v Apr 3, 2026
1320d88
add changefile
radium-v Apr 3, 2026
6f5d9e3
use requestIdleCallback ponyfill
radium-v Apr 3, 2026
b1559a0
update doc blocks
radium-v Apr 3, 2026
f879ccc
improve fastfixture type definitions and update fixture options handling
radium-v Apr 3, 2026
ae9b7bf
fix type and comparison for focusable element function
radium-v Apr 3, 2026
5ee11a5
update indicator property to be optional and add indicatorChanged method
radium-v Apr 3, 2026
72254b0
ensure the trigger and menu list exist before setting up the menu
radium-v Apr 3, 2026
5cfc311
minor stylistic changes
radium-v Apr 3, 2026
1711c89
update label visibility logic in BaseTextInput
radium-v Apr 5, 2026
9be5091
use rAF in waitForConnectedDescendants
radium-v Apr 6, 2026
c15e792
streamline dialog attribute updates and ensure proper role assignment
radium-v Apr 6, 2026
54f9efc
replace requestAnimationFrame with Updates.enqueue in progress bar, s…
radium-v Apr 6, 2026
85f4405
refactor disabledChanged method to remove requestAnimationFrame and i…
radium-v Apr 6, 2026
20a28fb
refactor disabledChanged and nameChanged methods to replace requestId…
radium-v Apr 6, 2026
f234f64
refactor control element handling to use mutation observer for validi…
radium-v Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-50437c2d-8cf5-4ddb-87d0-430812690b0b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

@github-actions github-actions bot Mar 4, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/MenuList 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 498 Changed
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.normal.chromium_1.png 89 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

"type": "prerelease",
"comment": "fix: harden component lifecycle for SSR/DSD hydration scenarios",
"packageName": "@fluentui/web-components",
"email": "863023+radium-v@users.noreply.github.com",
"dependentChangeType": "patch"
}
83 changes: 60 additions & 23 deletions packages/web-components/docs/web-components.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,18 +465,32 @@ export class BaseAnchor extends FASTElement {
// @public
export class BaseAvatar extends FASTElement {
constructor();
// (undocumented)
connectedCallback(): void;
// @internal
protected cleanupSlottedContent(): void;
// @internal
defaultSlot: HTMLSlotElement;
// (undocumented)
disconnectedCallback(): void;
// @internal
defaultSlotChanged(): void;
// @internal
elementInternals: ElementInternals;
// @internal
generateInitials(): string | void;
initials?: string | undefined;
// @internal
protected initialsChanged(): void;
// @internal
monogram: HTMLElement;
// @internal
protected monogramChanged(): void;
name?: string | undefined;
// @internal
slotchangeHandler(): void;
protected nameChanged(): void;
// @internal
slottedDefaults: Node[];
// @internal
protected slottedDefaultsChanged(): void;
// @internal
protected updateMonogram(): void;
}

// @public
Expand All @@ -489,8 +503,8 @@ export class BaseButton extends FASTElement {
connectedCallback(): void;
defaultSlottedContent: HTMLElement[];
disabled: boolean;
// (undocumented)
protected disabledChanged(): void;
// @internal
disabledChanged(): void;
disabledFocusable: boolean;
// @internal
disabledFocusableChanged(previous: boolean, next: boolean): void;
Expand All @@ -511,6 +525,8 @@ export class BaseButton extends FASTElement {
name?: string;
protected press(): void;
resetForm(): void;
// @internal
protected setTabIndex(): void;
type: ButtonType;
// @internal
typeChanged(previous: ButtonType, next: ButtonType): void;
Expand Down Expand Up @@ -599,6 +615,8 @@ export class BaseDropdown extends FASTElement {
changeHandler(e: Event): boolean | void;
checkValidity(): boolean;
clickHandler(e: PointerEvent): boolean | void;
// (undocumented)
connectedCallback(): void;
// @internal
control: HTMLInputElement;
// @internal
Expand Down Expand Up @@ -714,19 +732,21 @@ export class BaseField extends FASTElement {
// @public
export class BaseProgressBar extends FASTElement {
constructor();
// (undocumented)
connectedCallback(): void;
// @internal
elementInternals: ElementInternals;
// @internal (undocumented)
indicator: HTMLElement;
// @internal
indicator?: HTMLElement;
// @internal
protected indicatorChanged(): void;
// @internal
max?: number;
// @internal
protected maxChanged(prev: number | undefined, next: number | undefined): void;
// @internal
min?: number;
protected minChanged(prev: number | undefined, next: number | undefined): void;
// @internal
protected setIndicatorWidth(): void;
validationState: ProgressBarValidationState | null;
validationStateChanged(prev: ProgressBarValidationState | undefined, next: ProgressBarValidationState | undefined): void;
// @internal
Expand All @@ -751,8 +771,10 @@ export class BaseRatingDisplay extends FASTElement {
get formattedCount(): string;
// @internal (undocumented)
handleSlotChange(): void;
// @internal (undocumented)
// @internal
iconSlot: HTMLSlotElement;
// @internal
iconSlotChanged(): void;
// @deprecated
iconViewBox?: string;
max?: number;
Expand All @@ -778,6 +800,7 @@ export class BaseSpinner extends FASTElement {

// @public
export class BaseTablist extends FASTElement {
constructor();
activeid: string;
// @internal (undocumented)
protected activeidChanged(oldValue: string, newValue: string): void;
Expand All @@ -801,7 +824,7 @@ export class BaseTablist extends FASTElement {
// @internal (undocumented)
tabs: Tab[];
// @internal (undocumented)
protected tabsChanged(): void;
protected tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
}

// @public
Expand Down Expand Up @@ -974,10 +997,14 @@ export class BaseTree extends FASTElement {
childTreeItemsChanged(): void;
// @internal
clickHandler(e: Event): boolean | void;
// (undocumented)
connectedCallback(): void;
currentSelected: HTMLElement | null;
// @internal (undocumented)
defaultSlot: HTMLSlotElement;
// @internal
defaultSlotChanged(): void;
// @internal
elementInternals: ElementInternals;
// @internal
focusHandler(e: FocusEvent): void;
Expand Down Expand Up @@ -1087,7 +1114,7 @@ export const ButtonSize: {
export type ButtonSize = ValuesOf<typeof ButtonSize>;

// @public
export const ButtonTemplate: ElementViewTemplate<Button>;
export const ButtonTemplate: ElementViewTemplate<BaseButton>;

// @public
export const ButtonType: {
Expand Down Expand Up @@ -2407,16 +2434,14 @@ export class Dialog extends FASTElement {
ariaLabel: string | null;
ariaLabelledby?: string;
clickHandler(event: Event): boolean;
// @internal (undocumented)
connectedCallback(): void;
dialog: HTMLDialogElement;
emitBeforeToggle: () => void;
emitToggle: () => void;
hide(): void;
show(): void;
type: DialogType;
// (undocumented)
protected typeChanged(prev: DialogType | undefined, next: DialogType | undefined): void;
protected typeChanged(prev: DialogType | undefined, next: DialogType): void;
}

// @public
Expand Down Expand Up @@ -3042,6 +3067,12 @@ export class Listbox extends FASTElement {
// @internal
beforetoggleHandler(e: ToggleEvent): boolean | undefined;
clickHandler(e: PointerEvent): boolean | void;
// (undocumented)
connectedCallback(): void;
// @internal
defaultSlot: HTMLSlotElement;
// @internal
protected defaultSlotChanged(): void;
// @internal
dropdown?: BaseDropdown;
// @internal
Expand All @@ -3050,8 +3081,6 @@ export class Listbox extends FASTElement {
get enabledOptions(): DropdownOption[];
// @internal
handleChange(source: any, propertyName?: string): void;
// @override
id: string;
multiple?: boolean;
multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
options: DropdownOption[];
Expand All @@ -3061,7 +3090,7 @@ export class Listbox extends FASTElement {
selectedIndex: number;
get selectedOptions(): DropdownOption[];
selectOption(index?: number): void;
slotchangeHandler(e: Event): void;
slotchangeHandler(e?: Event): void;
}

// @public
Expand Down Expand Up @@ -3119,6 +3148,8 @@ export class Menu extends FASTElement {
primaryAction: HTMLSlotElement;
setComponent(): void;
slottedMenuList: MenuList[];
// @internal
slottedMenuListChanged(prev: MenuList[] | undefined, next: MenuList[] | undefined): void;
slottedTriggers: HTMLElement[];
split?: boolean;
toggleHandler: (e: Event) => void;
Expand Down Expand Up @@ -3464,7 +3495,8 @@ export class RadioGroup extends FASTElement {
// @internal
setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
// @internal
slotchangeHandler(e: Event): void;
slottedRadios: Radio[];
slottedRadiosChanged(prev: Radio[] | undefined, next: Radio[]): void;
// @internal
get validationMessage(): string;
get validity(): ValidityState;
Expand Down Expand Up @@ -3596,7 +3628,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
// @internal
calculateNewValue(rawValue: number): number;
checkValidity(): boolean;
// @internal (undocumented)
// (undocumented)
connectedCallback(): void;
decrement(): void;
// @internal (undocumented)
Expand Down Expand Up @@ -3626,6 +3658,8 @@ export class Slider extends FASTElement implements SliderConfiguration {
initialValue: string;
// @internal
protected initialValueChanged(_: string, next: string): void;
// @internal
protected get isDisabled(): boolean;
// @internal (undocumented)
isDragging: boolean;
get labels(): ReadonlyArray<Node>;
Expand Down Expand Up @@ -3933,9 +3967,12 @@ export const SwitchTemplate: ElementViewTemplate<Switch>;
//
// @public
export class Tab extends FASTElement {
constructor();
// (undocumented)
connectedCallback(): void;
disabled: boolean;
// @internal
elementInternals: ElementInternals;
}

// @public (undocumented)
Expand All @@ -3952,7 +3989,7 @@ export class Tablist extends BaseTablist {
activeidChanged(oldValue: string, newValue: string): void;
appearance?: TablistAppearance;
size?: TablistSize;
tabsChanged(): void;
tabsChanged(prev: Tab[] | undefined, next: Tab[] | undefined): void;
}

// @public
Expand Down
3 changes: 3 additions & 0 deletions packages/web-components/src/anchor-button/anchor-button.base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,9 @@ export class BaseAnchor extends FASTElement {

public connectedCallback() {
super.connectedCallback();

this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;

Observable.getNotifier(this).subscribe(this);

Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
Expand Down
Loading
Loading