[Feature]: Pure ESModules that do not import NodeJS Modules.

Library

Web Components (@fluentui/web-components)

Describe the feature that you would like added

The global north star idea is to use @fluentui/web-components without a bundler, using native browser platform ESModules.

Currently, the ESM exports are not true ESModules because they import node resolution modules which require a bundler or a post process script. The photo below shows you the red boxes which are breaking it.

I really believe @fluentui/web-components dist/esm folder should contain:

• A single ESModule for @microsoft/fast-element named fast-element.js which has 0 imports.
• Every component should have its own ESModule like fluentui-button.js and fluentui-accordian.js which only include 1 import to fast-element.js, and that is it. And each component will have their own TypeScript declaration files. Something like this:

The main reasons of doing this is because we have an enormous application (Chromium) where we want to host two versions of the FluentUI library to allow teams to incrementally migrate their surface when a breaking change occurs instead of messaging 60+ teams to update their Website in one go. The reason of this is because Chromium has a single node_modules folder and we want to treat libraries as pure ESModules.

LitElement and LitMaterial work this way as well making development easier to work with, something similar to FAST would be great for developer tooling as well.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

None