(web components) add base class support to wc

[chrisdholt]

Pull request checklist

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

Description of changes

Adds support for base class reference in element composition

Focus areas to test

(optional)

[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 73e32ae:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 27dd84d7e9332e20081966a168a79bc5fc925442 (build)

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	55.236 kB 17.409 kB
react-avatar Avatar	56.558 kB 15.66 kB
react-badge Badge	24.343 kB 7.165 kB
react-badge CounterBadge	27.156 kB 7.851 kB
react-badge PresenseBadge	237 B 177 B
react-button Button	22.932 kB 6.984 kB
react-button CompoundButton	28.215 kB 7.834 kB
react-button MenuButton	24.733 kB 7.546 kB
react-button ToggleButton	32.527 kB 7.601 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	164.243 kB 46.841 kB
react-components react-components: FluentProvider & webLightTheme	35.75 kB 11.392 kB
react-divider Divider	15.889 kB 5.747 kB
react-image Image	10.642 kB 4.264 kB
react-input Input	31.636 kB 11.312 kB
react-label Label	9.397 kB 3.839 kB
react-link Link	12.609 kB 4.948 kB
react-make-styles makeStaticStyles (runtime)	7.59 kB 3.321 kB
react-make-styles makeStyles + mergeClasses (runtime)	22.135 kB 8.356 kB
react-make-styles makeStyles + mergeClasses (build time)	2.557 kB 1.202 kB
react-menu Menu (including children components)	102.963 kB 31.313 kB
react-menu Menu (including selectable components)	105.239 kB 31.665 kB
react-popover Popover	100.6 kB 30.131 kB
react-portal Portal	6.725 kB 2.237 kB
react-positioning usePopper	23.145 kB 7.942 kB
react-provider FluentProvider	15.748 kB 5.773 kB
react-slider Slider	30.621 kB 9.711 kB
react-switch Switch	18.067 kB 6.181 kB
react-text Text - Default	11.798 kB 4.452 kB
react-text Text - Wrappers	15.414 kB 4.734 kB
react-theme Teams: all themes	32.941 kB 6.674 kB
react-theme Teams: Light theme	20.247 kB 5.662 kB
react-tooltip Tooltip	46.029 kB 15.655 kB
react-utilities SSRProvider	213 B 170 B

_{🤖 This report was generated against 27dd84d7e9332e20081966a168a79bc5fc925442}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	866	910	5000
BaseButton	mount	903	909	5000
Breadcrumb	mount	2621	2649	1000
ButtonNext	mount	449	448	5000
Checkbox	mount	1445	1471	5000
CheckboxBase	mount	1262	1247	5000
ChoiceGroup	mount	4703	4656	5000
ComboBox	mount	1003	983	1000
CommandBar	mount	10079	10101	1000
ContextualMenu	mount	6569	6425	1000
DefaultButton	mount	1119	1125	5000
DetailsRow	mount	3718	3700	5000
DetailsRowFast	mount	3662	3660	5000
DetailsRowNoStyles	mount	3563	3503	5000
Dialog	mount	2382	2381	1000
DocumentCardTitle	mount	147	141	1000
Dropdown	mount	3228	3191	5000
FluentProviderNext	mount	7421	7504	5000
FluentProviderWithTheme	mount	333	345	10
FluentProviderWithTheme	virtual-rerender	75	100	10
FluentProviderWithTheme	virtual-rerender-with-unmount	479	485	10
FocusTrapZone	mount	1785	1834	5000
FocusZone	mount	1778	1812	5000
IconButton	mount	1735	1731	5000
Label	mount	331	323	5000
Layer	mount	2970	2913	5000
Link	mount	462	456	5000
MakeStyles	mount	1809	1831	50000
MenuButton	mount	1493	1452	5000
MessageBar	mount	2041	2036	5000
Nav	mount	3250	3269	1000
OverflowSet	mount	1071	1070	5000
Panel	mount	2338	2337	1000
Persona	mount	832	831	1000
Pivot	mount	1395	1403	1000
PrimaryButton	mount	1289	1284	5000
Rating	mount	7549	7613	5000
SearchBox	mount	1293	1307	5000
Shimmer	mount	2487	2531	5000
Slider	mount	1938	1926	5000
SpinButton	mount	4978	4953	5000
Spinner	mount	418	415	5000
SplitButton	mount	3207	3144	5000
Stack	mount	490	507	5000
StackWithIntrinsicChildren	mount	1551	1581	5000
StackWithTextChildren	mount	4508	4491	5000
SwatchColorPicker	mount	9971	10098	5000
Tabs	mount	1378	1409	1000
TagPicker	mount	2554	2544	5000
TeachingBubble	mount	13237	13337	5000
Text	mount	402	399	5000
TextField	mount	1368	1361	5000
ThemeProvider	mount	1180	1190	5000
ThemeProvider	virtual-rerender	597	595	5000
ThemeProvider	virtual-rerender-with-unmount	1851	1849	5000
Toggle	mount	801	801	5000
buttonNative	mount	121	116	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatMinimalPerf.default	656	607	1.08:1
GridMinimalPerf.default	337	316	1.07:1
BoxMinimalPerf.default	348	327	1.06:1
ButtonMinimalPerf.default	166	156	1.06:1
FormMinimalPerf.default	386	363	1.06:1
DropdownManyItemsPerf.default	678	647	1.05:1
ImageMinimalPerf.default	371	353	1.05:1
SkeletonMinimalPerf.default	352	334	1.05:1
TableMinimalPerf.default	404	385	1.05:1
TreeWith60ListItems.default	173	164	1.05:1
PortalMinimalPerf.default	176	170	1.04:1
AnimationMinimalPerf.default	404	394	1.03:1
DialogMinimalPerf.default	759	740	1.03:1
LabelMinimalPerf.default	374	364	1.03:1
LoaderMinimalPerf.default	691	668	1.03:1
RadioGroupMinimalPerf.default	442	430	1.03:1
SliderMinimalPerf.default	1577	1533	1.03:1
VideoMinimalPerf.default	630	613	1.03:1
AvatarMinimalPerf.default	190	187	1.02:1
CardMinimalPerf.default	520	517	1.01:1
CarouselMinimalPerf.default	456	453	1.01:1
ChatDuplicateMessagesPerf.default	290	286	1.01:1
DatepickerMinimalPerf.default	5345	5307	1.01:1
DropdownMinimalPerf.default	3105	3068	1.01:1
EmbedMinimalPerf.default	4129	4075	1.01:1
HeaderMinimalPerf.default	362	357	1.01:1
HeaderSlotsPerf.default	755	745	1.01:1
ListMinimalPerf.default	504	501	1.01:1
IconMinimalPerf.default	604	596	1.01:1
TableManyItemsPerf.default	1861	1847	1.01:1
ToolbarMinimalPerf.default	923	910	1.01:1
TooltipMinimalPerf.default	1018	1005	1.01:1
TreeMinimalPerf.default	785	779	1.01:1
ButtonOverridesMissPerf.default	1660	1663	1:1
CheckboxMinimalPerf.default	2656	2651	1:1
FlexMinimalPerf.default	278	277	1:1
InputMinimalPerf.default	1251	1245	1:1
ListCommonPerf.default	603	603	1:1
MenuMinimalPerf.default	813	810	1:1
ReactionMinimalPerf.default	365	365	1:1
SegmentMinimalPerf.default	345	344	1:1
TextMinimalPerf.default	336	337	1:1
TextAreaMinimalPerf.default	484	482	1:1
AccordionMinimalPerf.default	148	149	0.99:1
ChatWithPopoverPerf.default	367	370	0.99:1
DividerMinimalPerf.default	345	349	0.99:1
ItemLayoutMinimalPerf.default	1185	1193	0.99:1
ListNestedPerf.default	540	546	0.99:1
ProviderMergeThemesPerf.default	1648	1673	0.99:1
SplitButtonMinimalPerf.default	4037	4074	0.99:1
CustomToolbarPrototype.default	3851	3887	0.99:1
AlertMinimalPerf.default	265	271	0.98:1
AttachmentSlotsPerf.default	1051	1072	0.98:1
MenuButtonMinimalPerf.default	1610	1641	0.98:1
PopupMinimalPerf.default	582	591	0.98:1
ProviderMinimalPerf.default	1000	1016	0.98:1
RefMinimalPerf.default	222	226	0.98:1
ButtonSlotsPerf.default	540	554	0.97:1
StatusMinimalPerf.default	653	671	0.97:1
LayoutMinimalPerf.default	358	372	0.96:1
ListWith60ListItems.default	621	646	0.96:1
RosterPerf.default	1122	1167	0.96:1
AttachmentMinimalPerf.default	144	159	0.91:1