feat(web-components): improve ergonomics of the fluent design system

change/@fluentui-web-components-366f5ffe-df49-4c8d-9348-8218b334dbd1.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(web-components): improve ergonomics of the fluent design system",
+  "packageName": "@fluentui/web-components",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/custom-elements.ts

@@ -36,6 +36,7 @@ import { fluentTextField } from './text-field/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
+import { Container } from '@microsoft/fast-foundation';
 
 export {
   fluentAccordion,
@@ -127,4 +128,19 @@ export const allComponents = {
   fluentTooltip,
   fluentTreeView,
   fluentTreeItem,
+  register(container?: Container) {
+      if (!container) {
+          // preserve backward compatibility with code that loops through
+          // the values of this object and calls them as funcs with no args
+          return;
+      }
+
+      for (const key in this) {
+          if (key === "register") {
+              continue;
+          }
+
+          this[key]().register(container);
+      }
+  },
 };

packages/web-components/src/fluent-design-system.ts

@@ -0,0 +1,12 @@
+import { DesignSystem } from "@microsoft/fast-foundation";
+
+/**
+ * Provides a design system for the specified element either by returning one that was
+ * already created for that element or creating one.
+ * @param element - The element to root the design system at. By default, this is the body.
+ * @returns A Fluent Design System
+ * @public
+ */
+export function provideFluentDesignSystem(element?: HTMLElement): DesignSystem {
+    return DesignSystem.getOrCreate(element).withPrefix("fluent");
+}

packages/web-components/src/index-rollup.ts

@@ -1,13 +1,14 @@
 // TODO: Is exporting Foundation still necessary with the updated API's?
 // export * from "@microsoft/fast-element";
-import { DesignSystem } from '@microsoft/fast-foundation';
 import { allComponents } from './custom-elements';
+import { provideFluentDesignSystem } from './fluent-design-system';
 
 export * from './index';
 
-/**
- * TODO rename this to FluentDesignSystem when {@link @FluentDesignSystem} interface is removed.
+  /**
+ * The global Fluent Design System.
+ * @remarks
+ * Only available if the components are added through a script tag
+ * rather than a module/build system.
  */
-export const fluentDesignSystem = DesignSystem.getOrCreate()
-  .withPrefix('fluent')
-  .register(...Object.values(allComponents).map(definition => definition()));
+export const FluentDesignSystem = provideFluentDesignSystem().register(allComponents);

packages/web-components/src/index.ts

@@ -2,7 +2,7 @@
  * Export all custom element definitions.
  */
 export * from './custom-elements';
-
+export * from "./fluent-design-system";
 export * from './accordion/';
 export * from './anchor/';
 export * from './anchored-region';