feat: close shadow roots of all web components

[nicholasrice]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

This PR closes the shadow roots of FluentUI Web Components. Please see #15346 for details.

closes #15346

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0cc96c7:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration
microsoft/fluentui: codesandbox-react-next-template	Configuration
microsoft/fluentui: codesandbox-react-northstar-template	Configuration

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations	Status
Avatar	mount	885	885	5000
BaseButton	mount	1020	987	5000
Breadcrumb	mount	44525	44224	5000
ButtonNext	mount	603	620	5000
Checkbox	mount	1856	1717	5000
CheckboxBase	mount	1471	1430	5000
ChoiceGroup	mount	5432	5475	5000
ComboBox	mount	1005	1005	1000
CommandBar	mount	8079	8080	1000
ContextualMenu	mount	13659	13815	1000
DefaultButton	mount	1254	1248	5000
DetailsRow	mount	3954	4014	5000
DetailsRowFast	mount	3942	3930	5000
DetailsRowNoStyles	mount	3758	3750	5000
Dialog	mount	1602	1629	1000
DocumentCardTitle	mount	1889	1896	1000
Dropdown	mount	2781	2820	5000
FocusTrapZone	mount	1833	1820	5000
FocusZone	mount	1922	1900	5000
IconButton	mount	1969	1929	5000
Label	mount	368	365	5000
Layer	mount	2164	2143	5000
Link	mount	486	490	5000
MenuButton	mount	1647	1683	5000
MessageBar	mount	2218	2211	5000
Nav	mount	3538	3507	1000
OverflowSet	mount	1505	1470	5000
Panel	mount	1550	1539	1000
Persona	mount	900	910	1000
Pivot	mount	1568	1542	1000
PrimaryButton	mount	1399	1405	5000
Rating	mount	8360	8312	5000
SearchBox	mount	1388	1415	5000
Shimmer	mount	2755	2839	5000
Slider	mount	1627	1608	5000
SpinButton	mount	5874	5331	5000
Spinner	mount	438	435	5000
SplitButton	mount	3412	3477	5000
Stack	mount	568	575	5000
StackWithIntrinsicChildren	mount	2088	2063	5000
StackWithTextChildren	mount	5510	5459	5000
SwatchColorPicker	mount	11065	11213	5000
TagPicker	mount	2959	2972	5000
TeachingBubble	mount	53143	53414	5000
Text	mount	468	453	5000
TextField	mount	1510	1460	5000
ThemeProvider	mount	1733	1743	5000
ThemeProvider	virtual-rerender	665	672	5000
Toggle	mount	916	906	5000
button	mount	122	130	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.49	0.53	0.92:1	2000	984
🦄	Button.Fluent	0.14	0.23	0.61:1	5000	692
🔧	Checkbox.Fluent	0.68	0.41	1.66:1	1000	678
🎯	Dialog.Fluent	0.18	0.25	0.72:1	5000	903
🔧	Dropdown.Fluent	3.15	0.54	5.83:1	1000	3154
🔧	Icon.Fluent	0.17	0.07	2.43:1	5000	825
🎯	Image.Fluent	0.1	0.13	0.77:1	5000	485
🔧	Slider.Fluent	1.65	0.41	4.02:1	1000	1651
🔧	Text.Fluent	0.09	0.04	2.25:1	5000	441
🦄	Tooltip.Fluent	0.13	16.73	0.01:1	5000	626

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	175	0	Infinity:1
AlertMinimalPerf.default	348	0	Infinity:1
AttachmentMinimalPerf.default	211	0	Infinity:1
AttachmentSlotsPerf.default	1298	0	Infinity:1
AvatarMinimalPerf.default	558	0	Infinity:1
BoxMinimalPerf.default	431	0	Infinity:1
ButtonMinimalPerf.default	209	0	Infinity:1
ButtonOverridesMissPerf.default	1855	0	Infinity:1
ButtonSlotsPerf.default	683	0	Infinity:1
ButtonUseCssPerf.default	922	0	Infinity:1
ButtonUseCssNestingPerf.default	1185	0	Infinity:1
CarouselMinimalPerf.default	515	0	Infinity:1
ChatDuplicateMessagesPerf.default	474	0	Infinity:1
ChatMinimalPerf.default	719	0	Infinity:1
ChatWithPopoverPerf.default	512	0	Infinity:1
CheckboxMinimalPerf.default	3089	0	Infinity:1
DialogMinimalPerf.default	899	0	Infinity:1
DividerMinimalPerf.default	465	0	Infinity:1
DropdownManyItemsPerf.default	859	0	Infinity:1
EmbedMinimalPerf.default	2187	0	Infinity:1
FormMinimalPerf.default	516	0	Infinity:1
GridMinimalPerf.default	425	0	Infinity:1
HeaderMinimalPerf.default	448	0	Infinity:1
HeaderSlotsPerf.default	942	0	Infinity:1
ImageMinimalPerf.default	479	0	Infinity:1
InputMinimalPerf.default	1445	0	Infinity:1
ItemLayoutMinimalPerf.default	1472	0	Infinity:1
LabelMinimalPerf.default	518	0	Infinity:1
LayoutMinimalPerf.default	504	0	Infinity:1
ListCommonPerf.default	760	0	Infinity:1
ListMinimalPerf.default	582	0	Infinity:1
ListNestedPerf.default	693	0	Infinity:1
ListWith60ListItems.default	1079	0	Infinity:1
LoaderMinimalPerf.default	824	0	Infinity:1
MenuMinimalPerf.default	994	0	Infinity:1
MenuButtonMinimalPerf.default	1775	0	Infinity:1
PortalMinimalPerf.default	193	0	Infinity:1
ProviderMinimalPerf.default	1067	0	Infinity:1
RadioGroupMinimalPerf.default	538	0	Infinity:1
ReactionMinimalPerf.default	486	0	Infinity:1
RefMinimalPerf.default	244	0	Infinity:1
SkeletonMinimalPerf.default	508	0	Infinity:1
SliderMinimalPerf.default	1676	0	Infinity:1
SplitButtonMinimalPerf.default	4209	0	Infinity:1
StatusMinimalPerf.default	848	0	Infinity:1
IconMinimalPerf.default	791	0	Infinity:1
TableManyItemsPerf.default	2593	0	Infinity:1
TableMinimalPerf.default	481	0	Infinity:1
TextMinimalPerf.default	454	0	Infinity:1
TextAreaMinimalPerf.default	599	0	Infinity:1
CustomToolbarPrototype.default	4135	0	Infinity:1
ToolbarMinimalPerf.default	1092	0	Infinity:1
TooltipMinimalPerf.default	911	0	Infinity:1
TreeMinimalPerf.default	1035	0	Infinity:1
TreeWith60ListItems.default	226	0	Infinity:1
VideoMinimalPerf.default	710	0	Infinity:1
Avatar.Fluent	984	0	Infinity:1
Button.Fluent	692	0	Infinity:1
Checkbox.Fluent	678	0	Infinity:1
Dialog.Fluent	903	0	Infinity:1
Icon.Fluent	825	0	Infinity:1
Image.Fluent	485	0	Infinity:1
Slider.Fluent	1651	0	Infinity:1
Text.Fluent	441	0	Infinity:1
Tooltip.Fluent	626	0	Infinity:1
Dropdown.Fluent	3154	1	3154:1
DropdownMinimalPerf.default	3117	1	3117:1
ProviderMergeThemesPerf.default	2156	1	2156:1
PopupMinimalPerf.default	800	1	800:1
CardMinimalPerf.default	674	1	674:1
AnimationMinimalPerf.default	483	1	483:1
SegmentMinimalPerf.default	429	1	429:1
FlexMinimalPerf.default	351	1	351:1

[size-auditor]

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: ad2fdb0

Possible causes

• The baseline build ad2fdb0 is broken
• The Size Auditor run for the baseline build ad2fdb0 was not triggered

Recommendations

• Please merge your branch for this Pull request with the latest master build and commit your changes once again

[msft-github-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release