diff --git a/.prettierignore b/.prettierignore
index 1b428b6629b..53bdb3e7383 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,2 @@
 packages/web-components/fast-components/src/default-palette.ts
+packages/web-components/fast-element/src/**/*.spec.ts
\ No newline at end of file
diff --git a/packages/web-components/fast-element/src/controller.spec.ts b/packages/web-components/fast-element/src/controller.spec.ts
index 39f9731ce77..1d72583f8e1 100644
--- a/packages/web-components/fast-element/src/controller.spec.ts
+++ b/packages/web-components/fast-element/src/controller.spec.ts
@@ -6,6 +6,7 @@ import { uniqueElementName, toHTML } from "./__test__/helpers";
 import { html } from "./template";
 import { DOM } from "./dom";
 import { css } from "./styles";
+import { Observable } from "./observation/observable";
 
 describe("The Controller", () => {
     const templateA = html`a`;
@@ -306,6 +307,19 @@ describe("The Controller", () => {
         }
     });
 
+    it("should have an observable isConnected property", () => {
+        const { element, controller } = createController();
+        let attached = controller.isConnected;
+        const handler = { handleChange: () => (attached = !attached) };
+        Observable.getNotifier(controller).subscribe(handler, "isConnected");
+
+        expect(attached).to.equal(false);
+        document.body.appendChild(element);
+        expect(attached).to.equal(true);
+        document.body.removeChild(element);
+        expect(attached).to.equal(false);
+    });
+
     it("should attach and detach the HTMLStyleElement supplied to .addStyles() and .removeStyles() to the shadowRoot", () => {
         const { controller, element } = createController({
             shadowOptions: {
diff --git a/packages/web-components/fast-element/src/controller.ts b/packages/web-components/fast-element/src/controller.ts
index f06d5fcf731..e372bf97c35 100644
--- a/packages/web-components/fast-element/src/controller.ts
+++ b/packages/web-components/fast-element/src/controller.ts
@@ -1,7 +1,11 @@
 import { FASTElementDefinition } from "./fast-definitions";
 import { ElementView } from "./view";
 import { PropertyChangeNotifier } from "./observation/notifier";
-import { defaultExecutionContext, Observable } from "./observation/observable";
+import {
+    defaultExecutionContext,
+    Observable,
+    observable,
+} from "./observation/observable";
 import { Behavior } from "./directives/behavior";
 import { ElementStyles, StyleTarget } from "./styles";
 import { Mutable } from "./interfaces";
@@ -51,6 +55,7 @@ export class Controller extends PropertyChangeNotifier {
      * Indicates whether or not the custom element has been
      * connected to the document.
      */
+    @observable
     public readonly isConnected: boolean = false;
 
     /**