diff --git a/doc/component.md b/doc/component.md
index e916c396..09f55cec 100644
--- a/doc/component.md
+++ b/doc/component.md
@@ -502,6 +502,31 @@ class ParentComponent {
 }
 ```
 
+There is an even more dynamic way to use `t-component`: its value can be an
+expression evaluating to an actual component class.  In that case, this is the
+class that will be used to create the component:
+
+```js
+class A extends Component<any, any, any> {
+    static template = xml`<span>child a</span>`;
+}
+class B extends Component<any, any, any> {
+    static template = xml`<span>child b</span>`;
+}
+class App extends Component<any, any, any> {
+    static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+
+    state = { child: "a" };
+
+    get myComponent() {
+        return this.state.child === "a" ? A : B;
+    }
+}
+```
+
+In this example, the component `App` selects dynamically the concrete sub
+component class.
+
 **CSS and style:** there is some specific support to allow the parent to declare
 additional css classes or style for the sub component: css declared in `class`, `style`, `t-att-class` or `t-att-style` will be added to the
 root component element.
diff --git a/src/component/directive.ts b/src/component/directive.ts
index 948008f7..ec5d2970 100644
--- a/src/component/directive.ts
+++ b/src/component/directive.ts
@@ -1,4 +1,5 @@
 import { QWeb } from "../qweb/index";
+import { INTERP_REGEXP } from "../qweb/context";
 import { MODS_CODE } from "../qweb/extensions";
 
 //------------------------------------------------------------------------------
@@ -398,10 +399,16 @@ QWeb.addDirective({
 
     ctx.addIf(`!w${componentID}`);
     // new component
-    ctx.addLine(`let componentKey${componentID} = ${ctx.interpolate(value)};`);
+    let dynamicFallback = "";
+    if (!value.match(INTERP_REGEXP)) {
+      dynamicFallback = `|| ${ctx.formatExpression(value)}`;
+    }
+    const interpValue = ctx.interpolate(value);
+    ctx.addLine(`let componentKey${componentID} = ${interpValue};`);
     ctx.addLine(
-      `let W${componentID} = context.constructor.components[componentKey${componentID}] || QWeb.components[componentKey${componentID}];`
+      `let W${componentID} = context.constructor.components[componentKey${componentID}] || QWeb.components[componentKey${componentID}]${dynamicFallback};`
     );
+
     // maybe only do this in dev mode...
     ctx.addLine(
       `if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
diff --git a/src/qweb/context.ts b/src/qweb/context.ts
index 448db444..3eaaf6b1 100644
--- a/src/qweb/context.ts
+++ b/src/qweb/context.ts
@@ -1,5 +1,6 @@
 import { compileExpr, QWebVar } from "./expression_parser";
 
+export const INTERP_REGEXP = /\{\{.*?\}\}/g;
 //------------------------------------------------------------------------------
 // Compilation Context
 //------------------------------------------------------------------------------
@@ -163,7 +164,7 @@ export class Context {
    *   '{{x ? 'a': 'b'}}' -> (x ? 'a' : 'b')
    */
   interpolate(s: string): string {
-    let matches = s.match(/\{\{.*?\}\}/g);
+    let matches = s.match(INTERP_REGEXP);
     if (matches && matches[0].length === s.length) {
       return `(${this.formatExpression(s.slice(2, -2))})`;
     }
diff --git a/src/router/RouteComponent.ts b/src/router/RouteComponent.ts
index faef639c..db37c702 100644
--- a/src/router/RouteComponent.ts
+++ b/src/router/RouteComponent.ts
@@ -3,25 +3,16 @@ import { xml } from "../tags";
 
 export class RouteComponent extends Component<any, {}, {}> {
   static template = xml`
-    <t t-foreach="routes" t-as="route">
-        <t t-if="env.router.currentRouteName === route.name">
-            <t t-component="{{route.component}}" t-props="env.router.currentParams"/>
-        </t>
+    <t>
+        <t
+            t-if="routeComponent"
+            t-component="routeComponent"
+            t-key="env.router.currentRouteName"
+            t-props="env.router.currentParams" />
     </t>
   `;
 
-  routes: any[] = [];
-  constructor(parent, props) {
-    super(parent, props);
-    const router = this.env.router;
-    for (let name of router.routeIds) {
-      const route = router.routes[name];
-      if (route.component) {
-        this.routes.push({
-          name: route.name,
-          component: "__component__" + route.name
-        });
-      }
-    }
+  get routeComponent(): any {
+      return this.env.router.currentRoute && this.env.router.currentRoute.component;
   }
 }
diff --git a/tests/__snapshots__/animations.test.ts.snap b/tests/__snapshots__/animations.test.ts.snap
index c9f40872..dfe1fb10 100644
--- a/tests/__snapshots__/animations.test.ts.snap
+++ b/tests/__snapshots__/animations.test.ts.snap
@@ -27,7 +27,7 @@ exports[`animations t-transition combined with component 1`] = `
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -73,7 +73,7 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
         }
         if (!w4) {
             let componentKey4 = \`Child\`;
-            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
             if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
             w4 = new W4(parent, props4);
             parent.__owl__.cmap[4] = w4.__owl__.id;
diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap
index 3e6dc975..f289b633 100644
--- a/tests/component/__snapshots__/component.test.ts.snap
+++ b/tests/component/__snapshots__/component.test.ts.snap
@@ -40,7 +40,7 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
     }
     if (!w8) {
         let componentKey8 = \`Child\`;
-        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
+        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
         if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
         w8 = new W8(parent, props8);
         parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -68,7 +68,7 @@ exports[`async rendering delayed component with t-asyncroot directive 1`] = `
     }
     if (!w11) {
         let componentKey11 = \`AsyncChild\`;
-        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
+        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
         if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
         w11 = new W11(parent, props11);
         parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -124,7 +124,7 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
     }
     if (!w8) {
         let componentKey8 = \`Child\`;
-        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
+        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
         if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
         w8 = new W8(parent, props8);
         parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -151,7 +151,7 @@ exports[`async rendering fast component with t-asyncroot directive 1`] = `
     }
     if (!w11) {
         let componentKey11 = \`AsyncChild\`;
-        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
+        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
         if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
         w11 = new W11(parent, props11);
         parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -206,7 +206,7 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
     }
     if (!w8) {
         let componentKey8 = \`Child\`;
-        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8];
+        let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| context['Child'];
         if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
         w8 = new W8(parent, props8);
         parent.__owl__.cmap[8] = w8.__owl__.id;
@@ -234,7 +234,7 @@ exports[`async rendering t-component with t-asyncroot directive: mixed re-render
     }
     if (!w11) {
         let componentKey11 = \`AsyncChild\`;
-        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11];
+        let W11 = context.constructor.components[componentKey11] || QWeb.components[componentKey11]|| context['AsyncChild'];
         if (!W11) {throw new Error('Cannot find the definition of component \\"' + componentKey11 + '\\"')}
         w11 = new W11(parent, props11);
         parent.__owl__.cmap[11] = w11.__owl__.id;
@@ -277,7 +277,7 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -322,7 +322,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -382,7 +382,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -440,7 +440,7 @@ exports[`class and style attributes with t-component t-att-class is properly add
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -485,7 +485,7 @@ exports[`composition sub components dom state with t-keepalive is preserved 1`]
         }
         if (!w4) {
             let componentKey4 = \`InputWidget\`;
-            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['InputWidget'];
             if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
             w4 = new W4(parent, props4);
             parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -545,7 +545,7 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
         }
         if (!w7) {
             let componentKey7 = \`ChildWidget\`;
-            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
+            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['ChildWidget'];
             if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
             w7 = new W7(parent, props7);
             parent.__owl__.cmap[templateId9] = w7.__owl__.id;
@@ -672,7 +672,7 @@ exports[`dynamic t-props basic use 1`] = `
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -716,7 +716,7 @@ exports[`lifecycle hooks willPatch/patched hook with t-keepalive 1`] = `
         }
         if (!w4) {
             let componentKey4 = \`ChildWidget\`;
-            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+            let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['ChildWidget'];
             if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
             w4 = new W4(parent, props4);
             parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -759,7 +759,7 @@ exports[`other directives with t-component t-on with handler bound to argument 1
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -801,7 +801,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -843,7 +843,7 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -885,7 +885,7 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -927,7 +927,7 @@ exports[`other directives with t-component t-on with prevent and self modifiers
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -969,7 +969,7 @@ exports[`other directives with t-component t-on with self and prevent modifiers
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1011,7 +1011,7 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1053,7 +1053,7 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1097,7 +1097,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
     }
     if (!w4) {
         let componentKey4 = \`child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[templateId6] = w4.__owl__.id;
@@ -1157,7 +1157,7 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
         }
         if (!w7) {
             let componentKey7 = \`Child\`;
-            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
+            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['Child'];
             if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
             w7 = new W7(parent, props7);
             parent.__owl__.cmap[templateId9] = w7.__owl__.id;
@@ -1381,7 +1381,7 @@ exports[`t-slot directive can define and call slots 1`] = `
     }
     if (!w4) {
         let componentKey4 = \`Dialog\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Dialog'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         w4 = new W4(parent, props4);
         parent.__owl__.cmap[4] = w4.__owl__.id;
@@ -1623,7 +1623,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
         }
         if (!w9) {
             let componentKey9 = \`Link\`;
-            let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9];
+            let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9]|| context['Link'];
             if (!W9) {throw new Error('Cannot find the definition of component \\"' + componentKey9 + '\\"')}
             w9 = new W9(parent, props9);
             parent.__owl__.cmap[templateId10] = w9.__owl__.id;
@@ -1728,7 +1728,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
         }
         if (!w10) {
             let componentKey10 = \`Link\`;
-            let W10 = context.constructor.components[componentKey10] || QWeb.components[componentKey10];
+            let W10 = context.constructor.components[componentKey10] || QWeb.components[componentKey10]|| context['Link'];
             if (!W10) {throw new Error('Cannot find the definition of component \\"' + componentKey10 + '\\"')}
             w10 = new W10(parent, props10);
             parent.__owl__.cmap[templateId11] = w10.__owl__.id;
@@ -1786,7 +1786,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
     }
     if (!w5) {
         let componentKey5 = \`Link\`;
-        let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5];
+        let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| context['Link'];
         if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')}
         w5 = new W5(parent, props5);
         parent.__owl__.cmap[5] = w5.__owl__.id;
@@ -1840,7 +1840,7 @@ exports[`top level sub widgets basic use 1`] = `
     }
     if (!w3) {
         let componentKey3 = \`Child\`;
-        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3];
+        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
         if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
         w3 = new W3(parent, props3);
         parent.__owl__.cmap[3] = w3.__owl__.id;
@@ -1881,7 +1881,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
         }
         if (!w3) {
             let componentKey3 = \`Child\`;
-            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3];
+            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
             if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
             w3 = new W3(parent, props3);
             parent.__owl__.cmap[3] = w3.__owl__.id;
@@ -1910,7 +1910,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
         }
         if (!w7) {
             let componentKey7 = \`OtherChild\`;
-            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7];
+            let W7 = context.constructor.components[componentKey7] || QWeb.components[componentKey7]|| context['OtherChild'];
             if (!W7) {throw new Error('Cannot find the definition of component \\"' + componentKey7 + '\\"')}
             w7 = new W7(parent, props7);
             parent.__owl__.cmap[7] = w7.__owl__.id;
diff --git a/tests/component/__snapshots__/props_validation.test.ts.snap b/tests/component/__snapshots__/props_validation.test.ts.snap
index 3ccffd98..93fcbe63 100644
--- a/tests/component/__snapshots__/props_validation.test.ts.snap
+++ b/tests/component/__snapshots__/props_validation.test.ts.snap
@@ -31,7 +31,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
     }
     if (!w4) {
         let componentKey4 = \`Child\`;
-        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4];
+        let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| context['Child'];
         if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
         utils.validateProps(W4, props4)
         w4 = new W4(parent, props4);
diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts
index 8ab8f355..027bf327 100644
--- a/tests/component/component.test.ts
+++ b/tests/component/component.test.ts
@@ -920,6 +920,30 @@ describe("composition", () => {
     delete QWeb.components["WidgetB"];
   });
 
+  test("can use dynamic components (the class) if given", async () => {
+    class A extends Component<any, any, any> {
+      static template = xml`<span>child a</span>`;
+    }
+    class B extends Component<any, any, any> {
+      static template = xml`<span>child b</span>`;
+    }
+    class App extends Component<any, any, any> {
+      static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
+      state = {
+        child: "a"
+      };
+      get myComponent() {
+        return this.state.child === "a" ? A : B;
+      }
+    }
+    const widget = new App(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<span>child a</span>");
+    widget.state.child = "b";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>child b</span>");
+  });
+
   test("don't fallback to global registry if widget defined locally", async () => {
     QWeb.registerComponent("WidgetB", WidgetB); // should not use this widget
     env.qweb.addTemplate("ParentWidget", `<div><t t-component="WidgetB"/></div>`);
diff --git a/tests/router/__snapshots__/RouteComponent.test.ts.snap b/tests/router/__snapshots__/RouteComponent.test.ts.snap
index 9d8097f3..e5eabb38 100644
--- a/tests/router/__snapshots__/RouteComponent.test.ts.snap
+++ b/tests/router/__snapshots__/RouteComponent.test.ts.snap
@@ -8,52 +8,37 @@ exports[`RouteComponent can render simple cases 1`] = `
     let parent = context;
     let owner = context;
     let result;
-    context = Object.create(context);
     var h = this.h;
-    var _1 = context['routes'];
-    if (!_1) { throw new Error('QWeb error: Invalid loop expression')}
-    var _2 = _3 = _1;
-    if (!(_1 instanceof Array)) {
-        _2 = Object.keys(_1);
-        _3 = Object.values(_1);
-    }
-    var _length2 = _2.length;
-    for (let i = 0; i < _length2; i++) {
-        context.route_first = i === 0;
-        context.route_last = i === _length2 - 1;
-        context.route_index = i;
-        context.route = _2[i];
-        context.route_value = _3[i];
-        if (context['env'].router.currentRouteName===context['route'].name) {
-            //COMPONENT
-            let def5;
-            let templateId7 = String(-6 - i);
-            let w6 = templateId7 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId7]] : false;
-            let vn8 = {};
-            result = vn8;
-            let props6 = Object.assign({}, context['env'].router.currentParams);
-            if (w6 && w6.__owl__.currentFiber && !w6.__owl__.vnode) {
-                if (utils.shallowEqual(props6, w6.__owl__.currentFiber.props)) {
-                    def5 = w6.__owl__.currentFiber.promise;
-                } else {
-                    w6.destroy();
-                    w6 = false;
-                }
-            }
-            if (!w6) {
-                let componentKey6 = (context['route'].component);
-                let W6 = context.constructor.components[componentKey6] || QWeb.components[componentKey6];
-                if (!W6) {throw new Error('Cannot find the definition of component \\"' + componentKey6 + '\\"')}
-                w6 = new W6(parent, props6);
-                parent.__owl__.cmap[templateId7] = w6.__owl__.id;
-                def5 = w6.__prepare(extra.fiber, undefined, undefined);
-                def5 = def5.then(vnode=>{if (w6.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId7, hook: {insert(vn) {let nvn=w6.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w6.destroy();}}});utils.defineProxy(vn8, pvnode);w6.__owl__.pvnode = pvnode;});
+    if (context['routeComponent']) {
+        //COMPONENT
+        let key4 = 'key' + context['env'].router.currentRouteName;
+        let def2;
+        let templateId5 = key4;
+        let w3 = templateId5 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId5]] : false;
+        let vn6 = {};
+        result = vn6;
+        let props3 = Object.assign({}, context['env'].router.currentParams);
+        if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
+            if (utils.shallowEqual(props3, w3.__owl__.currentFiber.props)) {
+                def2 = w3.__owl__.currentFiber.promise;
             } else {
-                def5 = def5 || w6.__updateProps(props6, extra.fiber, undefined, undefined);
-                def5 = def5.then(()=>{if (w6.__owl__.isDestroyed) {return};let pvnode=w6.__owl__.pvnode;utils.defineProxy(vn8, pvnode);});
+                w3.destroy();
+                w3 = false;
             }
-            extra.promises.push(def5);
         }
+        if (!w3) {
+            let componentKey3 = \`routeComponent\`;
+            let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['routeComponent'];
+            if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+            w3 = new W3(parent, props3);
+            parent.__owl__.cmap[templateId5] = w3.__owl__.id;
+            def2 = w3.__prepare(extra.fiber, undefined, undefined);
+            def2 = def2.then(vnode=>{if (w3.__owl__.isDestroyed){return}let pvnode=h(vnode.sel, {key: templateId5, hook: {insert(vn) {let nvn=w3.__mount(vnode, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});utils.defineProxy(vn6, pvnode);w3.__owl__.pvnode = pvnode;});
+        } else {
+            def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined);
+            def2 = def2.then(()=>{if (w3.__owl__.isDestroyed) {return};let pvnode=w3.__owl__.pvnode;utils.defineProxy(vn6, pvnode);});
+        }
+        extra.promises.push(def2);
     }
     return result;
 }"
diff --git a/tools/playground/samples.js b/tools/playground/samples.js
index c9ed9c92..6314608c 100644
--- a/tools/playground/samples.js
+++ b/tools/playground/samples.js
@@ -1373,17 +1373,16 @@ class WindowManager extends owl.Component {
   currentZindex = 1;
   addWindow(name) {
     const info = this.env.windows.find(w => w.name === name);
-    const id = \`w\${this.nextId++}\`;
     this.windows.push({
-      id: id,
+      id: this.nextId++,
       title: info.title,
       width: info.defaultWidth,
       height: info.defaultHeight,
       top: 0,
       left: 0,
-      zindex: this.currentZindex++
+      zindex: this.currentZindex++,
+      component: info.component
     });
-    this.constructor.components[id] = info.component;
     this.render();
   }
   closeWindow(ev) {
@@ -1452,7 +1451,7 @@ const WMS_XML = `<templates>
        t-on-update-z-index="updateZIndex"
        t-on-set-window-position="setWindowPosition">
     <Window t-foreach="windows" t-as="w" t-key="w.id" info="w">
-      <t t-component="{{w.id}}"/>
+      <t t-component="w.component"/>
     </Window>
   </div>