diff --git a/app/assets/javascripts/discourse/components/connector-container.js.es6 b/app/assets/javascripts/discourse/components/connector-container.js.es6
new file mode 100644
index 00000000000..905ec1058ee
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/connector-container.js.es6
@@ -0,0 +1 @@
+export default Ember.Component.extend();
diff --git a/app/assets/javascripts/discourse/widgets/connector.js.es6 b/app/assets/javascripts/discourse/widgets/connector.js.es6
index b81c758e8d1..22f225e808a 100644
--- a/app/assets/javascripts/discourse/widgets/connector.js.es6
+++ b/app/assets/javascripts/discourse/widgets/connector.js.es6
@@ -1,3 +1,5 @@
+import deprecated from 'discourse-common/lib/deprecated';
+
 export default class Connector {
 
   constructor(widget, opts) {
@@ -14,23 +16,43 @@ export default class Connector {
 
       const mounted = widget._findView();
 
-      let context;
-      if (opts.context === 'model') {
-        const model = widget.findAncestorModel();
-        context = model;
+      if (opts.templateName) {
+        deprecated(`Using a 'templateName' for a connector is deprecated. Use 'component' instead [${opts.templateName}]`);
       }
 
-      const view = Ember.View.create({
-        container: mounted.container || widget.register,
-        templateName: opts.templateName,
-        context
-      });
-      if (Ember.setOwner) {
-        Ember.setOwner(view, Ember.getOwner(mounted));
-      }
-      mounted._connected.push(view);
+      const container = Ember.getOwner ? Ember.getOwner(mounted) : mounted.container;
 
-      view.renderer.replaceIn(view, $elem[0]);
+      let view;
+
+      if (opts.component) {
+        const connector = container.lookupFactory('component:connector-container');
+        view = connector.create({
+          layoutName: `components/${opts.component}`,
+          model: widget.findAncestorModel()
+        });
+      }
+
+      if (opts.templateName) {
+        let context;
+        if (opts.context === 'model') {
+          const model = widget.findAncestorModel();
+          context = model;
+        }
+
+        view = Ember.View.create({
+          container: container || widget.register,
+          templateName: opts.templateName,
+          context
+        });
+      }
+
+      if (view) {
+        if (Ember.setOwner) {
+          Ember.setOwner(view, Ember.getOwner(mounted));
+        }
+        mounted._connected.push(view);
+        view.renderer.replaceIn(view, $elem[0]);
+      }
     });
 
     return elem;
diff --git a/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6 b/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6
index 2ee8df8723d..601a8fc96f3 100644
--- a/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6
+++ b/app/assets/javascripts/discourse/widgets/decorator-helper.js.es6
@@ -7,6 +7,7 @@ class DecoratorHelper {
   constructor(widget, attrs, state) {
     this.widget = widget;
     this.attrs = attrs;
+    this.canConnectComponent = true;
     this.state = state;
     this.register = widget.register;
     this.register.deprecateContainer(this);
@@ -105,7 +106,6 @@ class DecoratorHelper {
   connect(details) {
     return new Connector(this.widget, details);
   }
-
 }
 DecoratorHelper.prototype.h = h;