diff --git a/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json b/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json
new file mode 100644
index 00000000000..f34f3764ec9
--- /dev/null
+++ b/change/@microsoft-fast-element-b1805a85-fe36-49d9-b65a-2484ae0eaab0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "enumerate fast-element package as a ES module package",
+  "packageName": "@microsoft/fast-element",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/.eslintrc.cjs b/packages/web-components/fast-element/.eslintrc.cjs
new file mode 100644
index 00000000000..d5ea064f67e
--- /dev/null
+++ b/packages/web-components/fast-element/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "import/extensions": ["error", "always"],
+        "max-classes-per-file": "off",
+        "no-case-declarations": "off",
+        "@typescript-eslint/ban-types": [
+            "error",
+            {
+                types: {
+                    "{}": false,
+                    Function: false,
+                    Object: false,
+                },
+                extendDefaults: true,
+            },
+        ],
+    },
+};
diff --git a/packages/web-components/fast-element/.eslintrc.json b/packages/web-components/fast-element/.eslintrc.json
deleted file mode 100644
index cb11089e167..00000000000
--- a/packages/web-components/fast-element/.eslintrc.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-    "extends": ["@microsoft/eslint-config-fast-dna", "prettier"],
-    "rules": {
-        "max-classes-per-file": "off",
-        "no-case-declarations": "off",
-        "@typescript-eslint/ban-types": [
-            "error",
-            {
-                "types": {
-                    "{}": false,
-                    "Function": false,
-                    "Object": false
-                },
-                "extendDefaults": true
-            }
-        ],
-        "@typescript-eslint/no-use-before-define": ["error", { "typedefs": false }],
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/explicit-function-return-type": [
-            "error",
-            {
-                "allowExpressions": true
-            }
-        ],
-        "import/extensions": [
-            "error",
-            "always"
-        ]
-    }
-}
diff --git a/packages/web-components/fast-element/.npmignore b/packages/web-components/fast-element/.npmignore
index 08e9c472ee9..79b219206fb 100644
--- a/packages/web-components/fast-element/.npmignore
+++ b/packages/web-components/fast-element/.npmignore
@@ -9,7 +9,7 @@ src/
 
 # config files
 .eslintignore
-.eslintrc.js
+.eslintrc.cjs
 .mocharc.json
 .prettierignore
 api-extractor.json
@@ -19,4 +19,4 @@ tsconfig.json
 
 # cache
 .rollupcache
-temp
\ No newline at end of file
+temp
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index 1a48edc57ff..aa3b0a10ee5 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -16,6 +16,7 @@
     "url": "https://github.com/Microsoft/fast/issues/new/choose"
   },
   "main": "dist/esm/index.js",
+  "type": "module",
   "types": "dist/fast-element.d.ts",
   "type": "module",
   "unpkg": "dist/fast-element.min.js",
diff --git a/packages/web-components/fast-element/rollup.config.js b/packages/web-components/fast-element/rollup.config.js
index 1f5b65ed616..0bf491c43ac 100644
--- a/packages/web-components/fast-element/rollup.config.js
+++ b/packages/web-components/fast-element/rollup.config.js
@@ -7,7 +7,7 @@ import typescript from "rollup-plugin-typescript2";
 import {
     transformCSSFragment,
     transformHTMLFragment,
-} from "../../../build/transform-fragments";
+} from "../../../build/transform-fragments.js";
 
 const parserOptions = {
     sourceType: "module",
diff --git a/packages/web-components/fast-element/src/components/attributes.ts b/packages/web-components/fast-element/src/components/attributes.ts
index e70ce543b02..cb3051f44f4 100644
--- a/packages/web-components/fast-element/src/components/attributes.ts
+++ b/packages/web-components/fast-element/src/components/attributes.ts
@@ -1,7 +1,7 @@
-import { Accessor, Observable } from "../observation/observable";
-import { DOM } from "../dom";
-import type { Notifier } from "../observation/notifier";
-import { isString } from "../interfaces";
+import { Accessor, Observable } from "../observation/observable.js";
+import { DOM } from "../dom.js";
+import type { Notifier } from "../observation/notifier.js";
+import { isString } from "../interfaces.js";
 
 /**
  * Represents objects that can convert values to and from
diff --git a/packages/web-components/fast-element/src/components/controller.ts b/packages/web-components/fast-element/src/components/controller.ts
index 1eb174f272d..c6d1aeef58d 100644
--- a/packages/web-components/fast-element/src/components/controller.ts
+++ b/packages/web-components/fast-element/src/components/controller.ts
@@ -1,4 +1,3 @@
-import { DOM } from "../dom.js";
 import type { Mutable } from "../interfaces.js";
 import type { Behavior } from "../observation/behavior.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
diff --git a/packages/web-components/fast-element/src/components/fast-definitions.ts b/packages/web-components/fast-element/src/components/fast-definitions.ts
index 9c698fbfb87..154b00edc1a 100644
--- a/packages/web-components/fast-element/src/components/fast-definitions.ts
+++ b/packages/web-components/fast-element/src/components/fast-definitions.ts
@@ -1,8 +1,8 @@
-import { isString, Mutable } from "../interfaces";
-import { Observable } from "../observation/observable";
-import { ComposableStyles, ElementStyles } from "../styles/element-styles";
-import type { ElementViewTemplate } from "../templating/template";
-import { AttributeConfiguration, AttributeDefinition } from "./attributes";
+import { isString, Mutable } from "../interfaces.js";
+import { Observable } from "../observation/observable.js";
+import { ComposableStyles, ElementStyles } from "../styles/element-styles.js";
+import type { ElementViewTemplate } from "../templating/template.js";
+import { AttributeConfiguration, AttributeDefinition } from "./attributes.js";
 
 const defaultShadowOptions: ShadowRootInit = { mode: "open" };
 const defaultElementOptions: ElementDefinitionOptions = {};
diff --git a/packages/web-components/fast-element/src/dom.ts b/packages/web-components/fast-element/src/dom.ts
index a478147b26a..f95cd66af56 100644
--- a/packages/web-components/fast-element/src/dom.ts
+++ b/packages/web-components/fast-element/src/dom.ts
@@ -1,5 +1,5 @@
-import type { Callable } from "./interfaces";
-import { $global, TrustedTypesPolicy } from "./platform";
+import type { Callable } from "./interfaces.js";
+import { $global, TrustedTypesPolicy } from "./platform.js";
 
 /* eslint-disable */
 const fastHTMLPolicy: TrustedTypesPolicy = $global.trustedTypes.createPolicy(
diff --git a/packages/web-components/fast-element/src/index.ts b/packages/web-components/fast-element/src/index.ts
index e7ea35b8a32..178aea730f3 100644
--- a/packages/web-components/fast-element/src/index.ts
+++ b/packages/web-components/fast-element/src/index.ts
@@ -1,29 +1,28 @@
-export * from "./platform";
-export * from "./templating/template";
-export * from "./components/fast-element";
+export * from "./platform.js";
+export * from "./templating/template.js";
+export * from "./components/fast-element.js";
 export {
     FASTElementDefinition,
     PartialFASTElementDefinition,
-} from "./components/fast-definitions";
-export * from "./components/attributes";
-export * from "./components/controller";
-export type { Callable, Constructable, Mutable } from "./interfaces";
-export * from "./templating/compiler";
+} from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";
+export type { Callable, Constructable, Mutable } from "./interfaces.js";
+export * from "./templating/compiler.js";
 export {
     ElementStyles,
     ElementStyleFactory,
     ComposableStyles,
     StyleTarget,
-} from "./styles/element-styles";
-export { css, cssPartial } from "./styles/css";
-export { CSSDirective } from "./styles/css-directive";
-export * from "./templating/view";
-export * from "./observation/observable";
-export * from "./observation/notifier";
-export { Splice } from "./observation/array-change-records";
-export { enableArrayObservation } from "./observation/array-observer";
-export { DOM } from "./dom";
-export type { Behavior } from "./observation/behavior";
+} from "./styles/element-styles.js";
+export { css, cssPartial } from "./styles/css.js";
+export { CSSDirective } from "./styles/css-directive.js";
+export * from "./observation/observable.js";
+export * from "./observation/notifier.js";
+export { Splice } from "./observation/array-change-records.js";
+export { enableArrayObservation } from "./observation/array-observer.js";
+export { DOM } from "./dom.js";
+export type { Behavior } from "./observation/behavior.js";
 export {
     bind,
     oneTime,
@@ -33,7 +32,7 @@ export {
     BindingType,
     BindingBehaviorFactory,
     DefaultBindingOptions,
-} from "./templating/binding";
+} from "./templating/binding.js";
 export {
     ViewBehaviorTargets,
     ViewBehavior,
@@ -41,14 +40,15 @@ export {
     HTMLDirective,
     AspectedHTMLDirective,
     InlinableHTMLDirective,
-} from "./templating/html-directive";
-export * from "./templating/ref";
-export * from "./templating/when";
-export * from "./templating/repeat";
-export * from "./templating/slotted";
-export * from "./templating/children";
+} from "./templating/html-directive.js";
+export * from "./templating/ref.js";
+export * from "./templating/when.js";
+export * from "./templating/repeat.js";
+export * from "./templating/slotted.js";
+export * from "./templating/children.js";
+export * from "./templating/view.js";
 export {
     elements,
     ElementsFilter,
     NodeBehaviorOptions,
-} from "./templating/node-observation";
+} from "./templating/node-observation.js";
diff --git a/packages/web-components/fast-element/src/observation/array-observer.ts b/packages/web-components/fast-element/src/observation/array-observer.ts
index 1aa60e7862d..01a434c6303 100644
--- a/packages/web-components/fast-element/src/observation/array-observer.ts
+++ b/packages/web-components/fast-element/src/observation/array-observer.ts
@@ -1,8 +1,8 @@
-import { DOM } from "../dom";
-import { Splice } from "./array-change-records";
-import { SubscriberSet } from "./notifier";
-import type { Notifier } from "./notifier";
-import { Observable } from "./observable";
+import { DOM } from "../dom.js";
+import { Splice } from "./array-change-records.js";
+import { SubscriberSet } from "./notifier.js";
+import type { Notifier } from "./notifier.js";
+import { Observable } from "./observable.js";
 
 function adjustIndex(changeRecord: Splice, array: any[]): Splice {
     let index = changeRecord.index;
diff --git a/packages/web-components/fast-element/src/observation/observable.ts b/packages/web-components/fast-element/src/observation/observable.ts
index c243f78262b..e4e10c9aea6 100644
--- a/packages/web-components/fast-element/src/observation/observable.ts
+++ b/packages/web-components/fast-element/src/observation/observable.ts
@@ -1,7 +1,7 @@
-import { DOM } from "../dom";
-import { PropertyChangeNotifier, SubscriberSet } from "./notifier";
-import type { Notifier, Subscriber } from "./notifier";
-import { isFunction, isString } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isFunction, isString } from "../interfaces.js";
+import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
+import type { Notifier, Subscriber } from "./notifier.js";
 
 const volatileRegex = /(:|&&|\|\||if)/;
 const notifierLookup = new WeakMap<any, Notifier>();
diff --git a/packages/web-components/fast-element/src/styles/css.ts b/packages/web-components/fast-element/src/styles/css.ts
index dc94edfb349..195741cd5dc 100644
--- a/packages/web-components/fast-element/src/styles/css.ts
+++ b/packages/web-components/fast-element/src/styles/css.ts
@@ -1,8 +1,8 @@
-import type { FASTElement } from "../components/fast-element";
-import { isString } from "../interfaces";
-import type { Behavior } from "../observation/behavior";
-import { CSSDirective } from "./css-directive";
-import { ComposableStyles, ElementStyles } from "./element-styles";
+import type { FASTElement } from "../components/fast-element.js";
+import { isString } from "../interfaces.js";
+import type { Behavior } from "../observation/behavior.js";
+import { CSSDirective } from "./css-directive.js";
+import { ComposableStyles, ElementStyles } from "./element-styles.js";
 
 function collectStyles(
     strings: TemplateStringsArray,
diff --git a/packages/web-components/fast-element/src/styles/element-styles.ts b/packages/web-components/fast-element/src/styles/element-styles.ts
index 57dc196b334..b8dfed97f22 100644
--- a/packages/web-components/fast-element/src/styles/element-styles.ts
+++ b/packages/web-components/fast-element/src/styles/element-styles.ts
@@ -1,5 +1,5 @@
-import type { Behavior } from "../observation/behavior";
-import { DOM, nextId } from "../dom";
+import type { Behavior } from "../observation/behavior.js";
+import { DOM, nextId } from "../dom.js";
 
 /**
  * A node that can be targeted by styles.
diff --git a/packages/web-components/fast-element/src/templating/binding.ts b/packages/web-components/fast-element/src/templating/binding.ts
index 28d75cf4df6..03af099c526 100644
--- a/packages/web-components/fast-element/src/templating/binding.ts
+++ b/packages/web-components/fast-element/src/templating/binding.ts
@@ -1,19 +1,19 @@
-import { DOM } from "../dom";
-import { isString, Mutable } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isString, Mutable } from "../interfaces.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
     setCurrentEvent,
-} from "../observation/observable";
+} from "../observation/observable.js";
 import {
     InlinableHTMLDirective,
     ViewBehavior,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { CaptureType } from "./template";
-import type { SyntheticView } from "./view";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
+import type { SyntheticView } from "./view.js";
 
 export type BindingBehaviorFactory = {
     createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
diff --git a/packages/web-components/fast-element/src/templating/children.ts b/packages/web-components/fast-element/src/templating/children.ts
index 85419d018eb..9ba2a32c9b0 100644
--- a/packages/web-components/fast-element/src/templating/children.ts
+++ b/packages/web-components/fast-element/src/templating/children.ts
@@ -1,6 +1,6 @@
-import { isString } from "../interfaces";
-import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
-import type { CaptureType } from "./template";
+import { isString } from "../interfaces.js";
+import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The options used to configure child list observation.
diff --git a/packages/web-components/fast-element/src/templating/compiler.ts b/packages/web-components/fast-element/src/templating/compiler.ts
index 8fe9274aa2f..211284ac28a 100644
--- a/packages/web-components/fast-element/src/templating/compiler.ts
+++ b/packages/web-components/fast-element/src/templating/compiler.ts
@@ -1,14 +1,14 @@
+import { _interpolationEnd, _interpolationStart, DOM } from "../dom.js";
+import { isString } from "../interfaces.js";
+import type { ExecutionContext } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
 import type {
     AspectedHTMLDirective,
     HTMLDirective,
     InlinableHTMLDirective,
     ViewBehaviorFactory,
     ViewBehaviorTargets,
-} from "./html-directive";
-import { _interpolationEnd, _interpolationStart, DOM } from "../dom";
-import type { ExecutionContext } from "../observation/observable";
-import { bind, oneTime } from "./binding";
-import { isString } from "../interfaces";
+} from "./html-directive.js";
 
 const targetIdFrom = (parentId: string, nodeIndex: number) => `${parentId}.${nodeIndex}`;
 const descriptorCache: PropertyDescriptorMap = {};
diff --git a/packages/web-components/fast-element/src/templating/html-directive.ts b/packages/web-components/fast-element/src/templating/html-directive.ts
index d7cc532c76c..47071acc2d3 100644
--- a/packages/web-components/fast-element/src/templating/html-directive.ts
+++ b/packages/web-components/fast-element/src/templating/html-directive.ts
@@ -1,6 +1,6 @@
-import { DOM, nextId } from "../dom";
-import type { Behavior } from "../observation/behavior";
-import type { Binding, ExecutionContext } from "../observation/observable";
+import { DOM, nextId } from "../dom.js";
+import type { Behavior } from "../observation/behavior.js";
+import type { Binding, ExecutionContext } from "../observation/observable.js";
 
 /**
  * The target nodes available to a behavior.
diff --git a/packages/web-components/fast-element/src/templating/node-observation.ts b/packages/web-components/fast-element/src/templating/node-observation.ts
index 489b3e6569c..0b4e5ee6ef3 100644
--- a/packages/web-components/fast-element/src/templating/node-observation.ts
+++ b/packages/web-components/fast-element/src/templating/node-observation.ts
@@ -1,9 +1,9 @@
-import type { ExecutionContext } from "../observation/observable";
-import { emptyArray } from "../platform";
+import type { ExecutionContext } from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
+} from "./html-directive.js";
 
 /**
  * Options for configuring node observation behavior.
diff --git a/packages/web-components/fast-element/src/templating/ref.ts b/packages/web-components/fast-element/src/templating/ref.ts
index fb4d47a795e..af0b647077a 100644
--- a/packages/web-components/fast-element/src/templating/ref.ts
+++ b/packages/web-components/fast-element/src/templating/ref.ts
@@ -1,9 +1,9 @@
-import type { CaptureType } from "./template";
+import type { ExecutionContext } from "../observation/observable.js";
 import {
     StatelessAttachedAttributeDirective,
     ViewBehaviorTargets,
-} from "./html-directive";
-import type { ExecutionContext } from "../observation/observable";
+} from "./html-directive.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The runtime behavior for template references.
diff --git a/packages/web-components/fast-element/src/templating/repeat.ts b/packages/web-components/fast-element/src/templating/repeat.ts
index c1748ce96f2..fce7b46d902 100644
--- a/packages/web-components/fast-element/src/templating/repeat.ts
+++ b/packages/web-components/fast-element/src/templating/repeat.ts
@@ -1,19 +1,19 @@
-import { DOM } from "../dom";
+import { DOM } from "../dom.js";
+import { isFunction } from "../interfaces.js";
+import type { Splice } from "../observation/array-change-records.js";
+import { enableArrayObservation } from "../observation/array-observer.js";
+import type { Behavior } from "../observation/behavior.js";
+import type { Notifier, Subscriber } from "../observation/notifier.js";
 import {
     Binding,
     BindingObserver,
     ExecutionContext,
     Observable,
-} from "../observation/observable";
-import type { Notifier, Subscriber } from "../observation/notifier";
-import { enableArrayObservation } from "../observation/array-observer";
-import type { Splice } from "../observation/array-change-records";
-import type { Behavior } from "../observation/behavior";
-import { emptyArray } from "../platform";
-import { ViewBehaviorTargets, HTMLDirective } from "./html-directive";
-import { HTMLView, SyntheticView } from "./view";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
-import { isFunction } from "../interfaces";
+} from "../observation/observable.js";
+import { emptyArray } from "../platform.js";
+import { HTMLDirective, ViewBehaviorTargets } from "./html-directive.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
+import { HTMLView, SyntheticView } from "./view.js";
 
 /**
  * Options for configuring repeat behavior.
diff --git a/packages/web-components/fast-element/src/templating/slotted.ts b/packages/web-components/fast-element/src/templating/slotted.ts
index c65e4491c5d..d34b334b1ec 100644
--- a/packages/web-components/fast-element/src/templating/slotted.ts
+++ b/packages/web-components/fast-element/src/templating/slotted.ts
@@ -1,6 +1,6 @@
-import { isString } from "../interfaces";
-import { NodeObservationDirective, NodeBehaviorOptions } from "./node-observation";
-import type { CaptureType } from "./template";
+import { isString } from "../interfaces.js";
+import { NodeBehaviorOptions, NodeObservationDirective } from "./node-observation.js";
+import type { CaptureType } from "./template.js";
 
 /**
  * The options used to configure slotted node observation.
diff --git a/packages/web-components/fast-element/src/templating/template.ts b/packages/web-components/fast-element/src/templating/template.ts
index 97ab51fefad..4d9da0160c1 100644
--- a/packages/web-components/fast-element/src/templating/template.ts
+++ b/packages/web-components/fast-element/src/templating/template.ts
@@ -1,11 +1,11 @@
-import { DOM } from "../dom";
-import { Binding, defaultExecutionContext } from "../observation/observable";
-import { compileTemplate } from "./compiler";
-import type { HTMLTemplateCompilationResult } from "./compiler";
-import { ElementView, HTMLView, SyntheticView } from "./view";
-import { HTMLDirective, AspectedHTMLDirective } from "./html-directive";
-import { bind, oneTime } from "./binding";
-import { isFunction, isString } from "../interfaces";
+import { DOM } from "../dom.js";
+import { isFunction, isString } from "../interfaces.js";
+import { Binding, defaultExecutionContext } from "../observation/observable.js";
+import { bind, oneTime } from "./binding.js";
+import { compileTemplate } from "./compiler.js";
+import type { HTMLTemplateCompilationResult } from "./compiler.js";
+import { AspectedHTMLDirective, HTMLDirective } from "./html-directive.js";
+import { ElementView, HTMLView, SyntheticView } from "./view.js";
 
 /**
  * A template capable of creating views specifically for rendering custom elements.
diff --git a/packages/web-components/fast-element/src/templating/view.ts b/packages/web-components/fast-element/src/templating/view.ts
index 36eca6e8cf0..135cee099af 100644
--- a/packages/web-components/fast-element/src/templating/view.ts
+++ b/packages/web-components/fast-element/src/templating/view.ts
@@ -1,10 +1,10 @@
-import type { Behavior } from "../observation/behavior";
-import type { ExecutionContext } from "../observation/observable";
+import type { Behavior } from "../observation/behavior.js";
+import type { ExecutionContext } from "../observation/observable.js";
 import type {
-    ViewBehaviorTargets,
-    ViewBehaviorFactory,
     ViewBehavior,
-} from "./html-directive";
+    ViewBehaviorFactory,
+    ViewBehaviorTargets,
+} from "./html-directive.js";
 
 /**
  * Represents a collection of DOM nodes which can be bound to a data source.
diff --git a/packages/web-components/fast-element/src/templating/when.ts b/packages/web-components/fast-element/src/templating/when.ts
index b2a5cdca59a..bd2c1ac3fcc 100644
--- a/packages/web-components/fast-element/src/templating/when.ts
+++ b/packages/web-components/fast-element/src/templating/when.ts
@@ -1,6 +1,6 @@
-import { isFunction } from "../interfaces";
-import type { Binding, ExecutionContext } from "../observation/observable";
-import type { CaptureType, SyntheticViewTemplate } from "./template";
+import { isFunction } from "../interfaces.js";
+import type { Binding, ExecutionContext } from "../observation/observable.js";
+import type { CaptureType, SyntheticViewTemplate } from "./template.js";
 
 /**
  * A directive that enables basic conditional rendering in a template.