diff --git a/src/domain_abstract/model/StyleableModel.js b/src/domain_abstract/model/StyleableModel.js
index 593a42bff..4b0e8077e 100644
--- a/src/domain_abstract/model/StyleableModel.js
+++ b/src/domain_abstract/model/StyleableModel.js
@@ -3,8 +3,17 @@ import { shallowDiff } from '../../utils/mixins';
 import ParserHtml from '../../parser/model/ParserHtml';
 import { Model } from '../../common';
 
+const parserHtml = ParserHtml();
+
 export default class StyleableModel extends Model {
-  parseStyle = ParserHtml().parseStyle;
+  /**
+   * Forward style string to `parseStyle` to be parse to an object
+   * @param  {string} str
+   * @returns
+   */
+  parseStyle(str) {
+    return parserHtml.parseStyle(str);
+  }
 
   /**
    * To trigger the style change event on models I have to
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index 46bcbe922..0ea337fd3 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -417,6 +417,29 @@ describe('Component', () => {
     };
     newObj.components().each(model => inhereted(model));
   });
+
+  test('setStyle parses styles correctly', () => {
+    const styles = 'padding: 12px;height:auto;';
+    const expectedObj = {
+      padding: '12px',
+      height: 'auto',
+    };
+
+    const c = new Component();
+
+    expect(c.setStyle(styles)).toEqual(expectedObj);
+  });
+
+  test('setStyle should be called successfully when invoked internally', () => {
+    const ExtendedComponent = Component.extend({
+      init() {
+        const styles = 'padding: 12px;height:auto;';
+        this.setStyle(styles);
+      },
+    });
+
+    expect(() => new ExtendedComponent()).not.toThrowError();
+  });
 });
 
 describe('Image Component', () => {