diff --git a/index.d.ts b/index.d.ts
index 5414c29..e7e80fc 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,5 +1,5 @@
 declare namespace ReactWebComponent {
-  export const create: (app: JSX.Element, tagName: string, optOutFromShadowRoot?: boolean) => void;
+  export const create: (app: JSX.Element, tagName: string, optOutFromShadowRoot?: boolean, observedAttributes?: string[]) => void;
 }
 
 export default ReactWebComponent;
diff --git a/src/camelCasedAttribute.js b/src/camelCasedAttribute.js
new file mode 100644
index 0000000..b1e7c80
--- /dev/null
+++ b/src/camelCasedAttribute.js
@@ -0,0 +1 @@
+"use strict";module.exports=function(a){return a.replace(/-([a-z])/g,function(a){return a[1].toUpperCase()})};
\ No newline at end of file
diff --git a/src/dev/camelCasedAttribute.js b/src/dev/camelCasedAttribute.js
new file mode 100644
index 0000000..6f39280
--- /dev/null
+++ b/src/dev/camelCasedAttribute.js
@@ -0,0 +1,8 @@
+/**
+ * Takes in a node attributes map and returns an object with camelCased properties and values
+ * @param attribute
+ * @returns {{}}
+ */
+module.exports = function camelCasedAttribute(attribute) {
+  return attribute.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+};
diff --git a/src/dev/extractAttributes.js b/src/dev/extractAttributes.js
index 4205642..f6bfa5c 100644
--- a/src/dev/extractAttributes.js
+++ b/src/dev/extractAttributes.js
@@ -1,3 +1,5 @@
+const camelCasedAttribute = require('./camelCasedAttribute');
+
 /**
  * Takes in a node attributes map and returns an object with camelCased properties and values
  * @param nodeMap
@@ -15,7 +17,7 @@ module.exports = function extractAttributes(nodeMap) {
 
   for (attribute of attributes) {
     const key = Object.keys(attribute)[0];
-    const camelCasedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+    const camelCasedKey = camelCasedAttribute(key);
     obj[camelCasedKey] = attribute[key];
   }
 
diff --git a/src/dev/index.js b/src/dev/index.js
index b4ba315..37405b8 100644
--- a/src/dev/index.js
+++ b/src/dev/index.js
@@ -2,6 +2,7 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const retargetEvents = require('react-shadow-dom-retarget-events');
 const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');
+const camelCasedAttribute = require('./camelCasedAttribute');
 const extractAttributes = require('./extractAttributes');
 
 require('@webcomponents/shadydom');
@@ -12,8 +13,9 @@ module.exports = {
    * @param {JSX.Element} app
    * @param {string} tagName - The name of the web component. Has to be minus "-" delimited.
    * @param {boolean} useShadowDom - If the value is set to "true" the web component will use the `shadowDom`. The default value is true.
+   * @param {string[]} observedAttributes - The observed attributes of the web component
    */
-  create: (app, tagName, useShadowDom = true) => {
+  create: (app, tagName, useShadowDom = true, observedAttributes = []) => {
     let appInstance;
 
     const lifeCycleHooks = {
@@ -40,6 +42,9 @@ module.exports = {
     }
 
     const proto = class extends HTMLElement {
+      static get observedAttributes() {
+        return observedAttributes;
+      }
       connectedCallback() {
         const webComponentInstance = this;
         let mountPoint = webComponentInstance;
@@ -73,7 +78,7 @@ module.exports = {
           callLifeCycleHook('disconnectedCallback');
       }
       attributeChangedCallback (attributeName, oldValue, newValue, namespace) {
-        callLifeCycleHook('attributeChangedCallback', [attributeName, oldValue, newValue, namespace]);
+        callLifeCycleHook('attributeChangedCallback', [camelCasedAttribute(attributeName), oldValue, newValue, namespace]);
       }
       adoptedCallback (oldDocument, newDocument) {
         callLifeCycleHook('adoptedCallback', [oldDocument, newDocument]);
diff --git a/src/extractAttributes.js b/src/extractAttributes.js
index 89af623..d756663 100644
--- a/src/extractAttributes.js
+++ b/src/extractAttributes.js
@@ -1 +1 @@
-"use strict";function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}module.exports=function(a){if(!a.attributes)return{};var b={},c=void 0,d=[].concat(_toConsumableArray(a.attributes)),e=d.map(function(a){return _defineProperty({},a.name,a.value)}),f=!0,g=!1,h=void 0;try{for(var i,j=e[Symbol.iterator]();!(f=(i=j.next()).done);f=!0){c=i.value;var k=Object.keys(c)[0],l=k.replace(/-([a-z])/g,function(a){return a[1].toUpperCase()});b[l]=c[k]}}catch(a){g=!0,h=a}finally{try{!f&&j.return&&j.return()}finally{if(g)throw h}}return b};
\ No newline at end of file
+'use strict';function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toConsumableArray(a){if(Array.isArray(a)){for(var b=0,c=Array(a.length);b<a.length;b++)c[b]=a[b];return c}return Array.from(a)}var camelCasedAttribute=require('./camelCasedAttribute');module.exports=function(a){if(!a.attributes)return{};var b={},c=void 0,d=[].concat(_toConsumableArray(a.attributes)),e=d.map(function(a){return _defineProperty({},a.name,a.value)}),f=!0,g=!1,h=void 0;try{for(var i,j=e[Symbol.iterator]();!(f=(i=j.next()).done);f=!0){c=i.value;var k=Object.keys(c)[0],l=camelCasedAttribute(k);b[l]=c[k]}}catch(a){g=!0,h=a}finally{try{!f&&j.return&&j.return()}finally{if(g)throw h}}return b};
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f7f0654..51e17dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1 @@
-'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var React=require('react'),ReactDOM=require('react-dom'),retargetEvents=require('react-shadow-dom-retarget-events'),getStyleElementsFromReactWebComponentStyleLoader=require('./getStyleElementsFromReactWebComponentStyleLoader'),extractAttributes=require('./extractAttributes');require('@webcomponents/shadydom'),require('@webcomponents/custom-elements'),module.exports={create:function create(a,b){function c(a){f.webComponentConstructed&&f.webComponentConstructed.apply(f,[a])}function d(a,b){var c=g[a];c&&f&&f[c]&&f[c].apply(f,b||[])}var e=!(2<arguments.length&&arguments[2]!==void 0)||arguments[2],f=void 0,g={attachedCallback:'webComponentAttached',connectedCallback:'webComponentConnected',disconnectedCallback:'webComponentDisconnected',attributeChangedCallback:'webComponentAttributeChanged',adoptedCallback:'webComponentAdopted'},h=function(b){function g(){return _classCallCheck(this,g),_possibleConstructorReturn(this,(g.__proto__||Object.getPrototypeOf(g)).apply(this,arguments))}return _inherits(g,b),_createClass(g,[{key:'connectedCallback',value:function connectedCallback(){var b=this,g=b;if(e){var h=b.attachShadow({mode:'open'});g=document.createElement('div');var i=getStyleElementsFromReactWebComponentStyleLoader();i.forEach(function(a){h.appendChild(a.cloneNode(h))}),h.appendChild(g),retargetEvents(h)}ReactDOM.render(React.cloneElement(a,extractAttributes(b)),g,function(){f=this,c(b),d('connectedCallback')})}},{key:'disconnectedCallback',value:function disconnectedCallback(){d('disconnectedCallback')}},{key:'attributeChangedCallback',value:function attributeChangedCallback(a,b,c,e){d('attributeChangedCallback',[a,b,c,e])}},{key:'adoptedCallback',value:function adoptedCallback(a,b){d('adoptedCallback',[a,b])}}]),g}(_CustomElement);customElements.define(b,h)}};
\ No newline at end of file
+'use strict';var _createClass=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var React=require('react'),ReactDOM=require('react-dom'),retargetEvents=require('react-shadow-dom-retarget-events'),getStyleElementsFromReactWebComponentStyleLoader=require('./getStyleElementsFromReactWebComponentStyleLoader'),camelCasedAttribute=require('./camelCasedAttribute'),extractAttributes=require('./extractAttributes');require('@webcomponents/shadydom'),require('@webcomponents/custom-elements'),module.exports={create:function create(a,b){function c(a){g.webComponentConstructed&&g.webComponentConstructed.apply(g,[a])}function d(a,b){var c=h[a];c&&g&&g[c]&&g[c].apply(g,b||[])}var e=!(2<arguments.length&&arguments[2]!==void 0)||arguments[2],f=3<arguments.length&&arguments[3]!==void 0?arguments[3]:[],g=void 0,h={attachedCallback:'webComponentAttached',connectedCallback:'webComponentConnected',disconnectedCallback:'webComponentDisconnected',attributeChangedCallback:'webComponentAttributeChanged',adoptedCallback:'webComponentAdopted'},i=function(b){function h(){return _classCallCheck(this,h),_possibleConstructorReturn(this,(h.__proto__||Object.getPrototypeOf(h)).apply(this,arguments))}return _inherits(h,b),_createClass(h,[{key:'connectedCallback',value:function connectedCallback(){var b=this,f=b;if(e){var h=b.attachShadow({mode:'open'});f=document.createElement('div');var i=getStyleElementsFromReactWebComponentStyleLoader();i.forEach(function(a){h.appendChild(a.cloneNode(h))}),h.appendChild(f),retargetEvents(h)}ReactDOM.render(React.cloneElement(a,extractAttributes(b)),f,function(){g=this,c(b),d('connectedCallback')})}},{key:'disconnectedCallback',value:function disconnectedCallback(){d('disconnectedCallback')}},{key:'attributeChangedCallback',value:function attributeChangedCallback(a,b,c,e){d('attributeChangedCallback',[camelCasedAttribute(a),b,c,e])}},{key:'adoptedCallback',value:function adoptedCallback(a,b){d('adoptedCallback',[a,b])}}],[{key:'observedAttributes',get:function get(){return f}}]),h}(_CustomElement);customElements.define(b,i)}};
\ No newline at end of file