diff --git a/packages/csx/package.json b/packages/csx/package.json
index 4431bd9..5b6d20a 100644
--- a/packages/csx/package.json
+++ b/packages/csx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cerxes/csx",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "author": "Miel Truyen <miel.truyen@cerxes.net>",
   "description": "CSX is a minimalistic UI-framework inspired by React+JSX for usage with WebComponents.",
   "repository": {
diff --git a/packages/csx/src/custom-element/prop.js b/packages/csx/src/custom-element/prop.js
index e81e5fc..2e3aba0 100644
--- a/packages/csx/src/custom-element/prop.js
+++ b/packages/csx/src/custom-element/prop.js
@@ -3,14 +3,13 @@ import { trackValue } from "../decorator-utils/track-value";
 /**
  * Decorate a variable as a property of the custom-element.
  * @param {Object} opts
- * @param {boolean} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
+ * @param {boolean|string} opts.attr - Update the property when an attribute with specified name is set. Defaults to the property-name
  * @param {boolean} opts.reflect - Reflect the property back to attributes when the property is set
  */
 export function Prop(opts) {
     opts = opts || {};
     return function decorator(target, key, descriptor) {
         // Dev-note: Tis is run for every instance made of the decorated class ...
-        // console.log("Prop " + key, target);
         // TODO could check the prototype if a markDirty function exists, throw an error if it doesn't
         
         // Register this prop on the class, so the VDOM-renderer can find this and set the prop instead of the attribute (if @meta is every introduced as a built-in decorator, this would be the place to use it)
diff --git a/packages/csx/src/vdom/renderers/nodetree.js b/packages/csx/src/vdom/renderers/nodetree.js
index bfa2bbd..f12f6bd 100644
--- a/packages/csx/src/vdom/renderers/nodetree.js
+++ b/packages/csx/src/vdom/renderers/nodetree.js
@@ -83,8 +83,8 @@ export const NodeTreeRenderer = {
                 special({host, newVal, oldVal, key});
             }else if(key.slice(0,2)==='on' && key[2]>='A' && key[2]<='Z'){
                 // Event-prop
-                // Convert event name from camelCase to dash-case (this means that this on<EvenName> syntax might not be able to cover all custom-events)
-                let eventName = key[2].toLowerCase()+key.slice(3).replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
+                // Convert event name from camelCase to lowercase
+                let eventName = key[2].toLowerCase()+key.slice(3).toLowerCase(); // This used to dash case things: .replace(/[A-Z]/g, function(c){return('-'+c.toLowerCase())});
                 if(!newVal){
                     host.removeEventListener(eventName, oldVal);
                 }else{
@@ -145,9 +145,9 @@ const VNODE_SPECIAL_PROPS = {
                         host.style[key]=null;
                     }
                 }
-                for(let key in newVal){
-                    host.style[key] = newVal[key];
-                }
+            }
+            for(let key in newVal){
+                host.style[key] = newVal[key];
             }
         }else if(!newVal){
             host.removeAttribute('style');
@@ -157,4 +157,4 @@ const VNODE_SPECIAL_PROPS = {
         //TODO!!
         throw new Error("We're still planning to implement this but it hasn't been done yet!");
     },
-};
\ No newline at end of file
+};
diff --git a/tests/basic/index.jsx b/tests/basic/index.jsx
index 38cdbd2..13738c3 100644
--- a/tests/basic/index.jsx
+++ b/tests/basic/index.jsx
@@ -8,7 +8,7 @@ document.body.appendChild(render(<div class="center-me" iCanDoUpperCaseAttrs={ "
 </div>));
 
 //document.body.appendChild(render(<example-page />));
-document.body.appendChild(render(<ExamplePage />));
+document.body.appendChild(render(<ExamplePage pageWidth={200} />));
 
 /**
  * Continuation suggestionss:
diff --git a/tests/basic/page.jsx b/tests/basic/page.jsx
index f0447c2..2890815 100644
--- a/tests/basic/page.jsx
+++ b/tests/basic/page.jsx
@@ -1,12 +1,32 @@
-import {defineElement, render, CustomElement} from "../../packages/csx";
+import {defineElement, render, CustomElement, Prop, State} from "../../packages/csx";
 
 @defineElement('example-page')
 export class ExamplePage extends CustomElement{
+    
+    @Prop({reflect: true, attr: 'page-width'})
+    set pageWidth(value){
+        if(value!==this.#pageWidth){
+            this.#pageWidth = value;
+        }
+    }
+    get pageWidth(){
+        return this.#pageWidth;
+    }
+    #pageWidth = undefined;
+    
+    render(){
+        return <div className="page" style={{width: `${this.pageWidth}px`}}>
+            <h1>This page is an example!</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit enim, lacinia in pellentesque ut, fermentum quis risus. Vivamus condimentum turpis ac mattis blandit. Ut scelerisque nulla suscipit, rhoncus justo eget, pulvinar ligula. Donec vel orci dolor. Etiam non neque non lorem venenatis tincidunt. Cras tristique mauris ut leo imperdiet, in bibendum elit ultricies. Morbi et felis sed arcu efficitur aliquam.<br/>
+                Nam ornare scelerisque vestibulum. In porta non risus a tristique. Donec tincidunt diam sed dictum iaculis. In faucibus placerat justo, ut pulvinar tortor hendrerit viverra. Aliquam erat volutpat. Quisque euismod leo at eros fringilla varius. Nam et vulputate nunc. Nunc mattis purus eu massa lacinia posuere.<br/>
+                In fermentum hendrerit purus non mollis. Duis vel leo nibh. Praesent at odio suscipit, consequat lorem quis, posuere lorem. Donec molestie sodales feugiat. Ut in nisi vel est luctus tristique non eget elit. Donec accumsan quam id scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu lacus convallis elit eleifend tristique id et sapien. Mauris cursus a enim ut scelerisque. Morbi auctor nisl sem, id dignissim lectus condimentum non. Ut tellus lacus, volutpat eget porttitor et, vulputate pharetra nunc. Donec nec ligula est. Donec eget odio tincidunt, laoreet mi sit amet, euismod odio. Donec vitae dignissim leo, nec ultricies quam.<br/>
+                Proin efficitur arcu sit amet congue commodo. Suspendisse non tristique libero. Maecenas tempor arcu ac felis posuere, eu gravida metus euismod. Vivamus hendrerit nisl id venenatis sodales. Phasellus pharetra arcu a arcu aliquam faucibus. Etiam sodales ligula nisl, sit amet posuere turpis ultricies id. Donec euismod nunc eros, at euismod neque tempor a. Nullam felis eros, imperdiet ac arcu id, lobortis lobortis tellus. Duis mollis sodales leo, et tincidunt enim pretium luctus.<br/>ulputate lorem.
+            </p>
+        </div>
+    }
+    
     connectedCallback() {
-        this.appendChild(render(
-            <div class="page">
-                <h1>This page is an example!</h1>
-            </div>
-        ));
+        super.connectedCallback();
     }
 }
\ No newline at end of file
diff --git a/tests/todos-mvc/components/todo-item.jsx b/tests/todos-mvc/components/todo-item.jsx
index 427e6cf..29da30e 100644
--- a/tests/todos-mvc/components/todo-item.jsx
+++ b/tests/todos-mvc/components/todo-item.jsx
@@ -3,7 +3,7 @@ import style from './todo-item.scss';
 
 @defineElement('todo-item')
 export class TodoItem extends CustomElement{
-    @Prop() checked = false;
+    @Prop({reflect: true}) checked = false;
     @Prop() model;
     
     render(){