diff --git a/src/selector_manager/index.ts b/src/selector_manager/index.ts
index f70a47712..617350775 100644
--- a/src/selector_manager/index.ts
+++ b/src/selector_manager/index.ts
@@ -200,7 +200,7 @@ export default class SelectorManager extends Module {
     return this;
   }
 
-  addSelector(name: string | { name?: string; label?: string }, opts = {}, cOpts = {}): Selector {
+  addSelector(name: string | { name?: string; label?: string } | Selector, opts = {}, cOpts = {}): Selector {
     let props: any = { ...opts };
 
     if (isObject(name)) {
@@ -227,7 +227,8 @@ export default class SelectorManager extends Module {
     const selector = cname ? this.get(cname, props.type) : all.where(props)[0];
 
     if (!selector) {
-      return all.add(new Selector(props, { ...cOpts, config, em }));
+      const selModel = props instanceof Selector ? props : new Selector(props, { ...cOpts, config, em });
+      return all.add(selModel, cOpts);
     }
 
     return selector;
diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js
index d77d0fe36..df7dbb99b 100644
--- a/test/specs/dom_components/index.js
+++ b/test/specs/dom_components/index.js
@@ -48,13 +48,12 @@ describe('DOM Components', () => {
       em = new Editor({
         avoidInlineStyle: 1,
       });
-      em.get('PageManager').onLoad();
+      em.loadOnStart();
       config = {
         em,
         storeWrapper: 1,
       };
       obj = em.get('DomComponents');
-      // obj = new DomComponents().init(config);
     });
 
     afterEach(() => {
@@ -235,5 +234,38 @@ describe('DOM Components', () => {
       expect(comp.get('type')).toBe(id);
       expect(comp.get('editable')).toBe(1);
     });
+
+    test('Remove and undo component with styles', done => {
+      const id = 'idtest2';
+      const um = em.get('UndoManager');
+      const cc = em.get('CssComposer');
+      const component = obj.addComponent(`
+      <div id="${id}" style="color:red; padding: 50px 100px">Text</div>
+      <style>
+        #${id} { background-color: red }
+      </style>`);
+      obj.getComponents().first().addStyle({ margin: '10px' });
+      const rule = cc.getAll().at(0);
+      const css = `#${id}{background-color:red;margin:10px;color:red;padding:50px 100px;}`;
+      expect(rule.toCSS()).toEqual(css);
+
+      setTimeout(() => {
+        // Undo is committed now
+        component.remove();
+        expect(obj.getComponents().length).toBe(0);
+        expect(cc.getAll().length).toBe(0);
+        um.undo();
+
+        expect(obj.getComponents().length).toBe(1);
+        expect(cc.getAll().length).toBe(1);
+        expect(obj.getComponents().at(0)).toBe(component);
+        expect(cc.getAll().at(0)).toBe(rule);
+
+        expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
+        expect(rule.toCSS()).toEqual(css);
+
+        done();
+      });
+    });
   });
 });