diff --git a/Slim.js b/Slim.js
index 9ffe5d7..aeddf82 100644
--- a/Slim.js
+++ b/Slim.js
@@ -22,7 +22,6 @@ class Slim extends HTMLElement {
 
     static __moveChildren(source, target, activate) {
         while (source.children.length) {
-            let child = source.children[0]
             target.appendChild(source.children[0])
         }
         let children = Array.prototype.slice.call( target.querySelectorAll('*'))
@@ -93,6 +92,19 @@ class Slim extends HTMLElement {
         this.__bind(descriptor)
     }
 
+    callAttribute(attributeName, value) {
+        let fnName = this.getAttribute(attributeName)
+        if (fnName === null) return
+        if (typeof this[fnName] === 'function') {
+            this[fnName](value)
+        } else if (typeof this._boundParent[fnName] === 'function') {
+            this._boundParent[fnName](value)
+        } else if (this._boundParent && this._boundParent._boundParent && typeof this._boundParent._boundParent[fnName] === 'function') {
+            // safari, firefox
+            this._boundParent._boundParent[fnName](value)
+        }
+    }
+
     __bind(descriptor) {
         descriptor.properties.forEach(
             prop => {
@@ -385,7 +397,6 @@ class SlimRepeater extends Slim {
             this.sourceData.forEach( (dataItem, index ) => {
                 let clone = this.sourceNode.cloneNode(true)
                 clone.removeAttribute('slim-repeat')
-                clone._boundParent = clone
                 clone.data = dataItem
                 clone.data_index = index
                 clone.data_source = this.sourceData
@@ -400,7 +411,6 @@ class SlimRepeater extends Slim {
                 clone.setAttribute('slim-repeat-index', index)
                 this.insertAdjacentHTML('beforeEnd', clone.outerHTML)
                 clone = this.find('*[slim-repeat-index="' + index.toString() + '"]')
-                clone._boundParent = clone
                 clone.data = dataItem
                 clone.data_index = index
                 clone.data_source = this.sourceData
@@ -412,14 +422,16 @@ class SlimRepeater extends Slim {
         for (let clone of this.clones) {
             clone.textContent = clone.sourceText
             clone.data = clone.data
-            clone._boundParent = clone
+            if (Slim.__prototypeDict[clone.localName] !== undefined || clone.isSlim) {
+                clone._boundParent = this._boundParent
+            }
+            else {
+                clone._boundParent = clone
+            }
         }
         this._executeBindings()
         Slim.__moveChildren(this._virtualDOM, this, true)
-
     }
 }
 Slim.tag('slim-repeat', SlimRepeater)
-window.SlimRepeater = SlimRepeater
-
-Slim.tag('slim-element', class extends Slim {})
+window.SlimRepeater = SlimRepeater
\ No newline at end of file
diff --git a/example/FourInARow/index.html b/example/FourInARow/index.html
new file mode 100644
index 0000000..e30bdfc
--- /dev/null
+++ b/example/FourInARow/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4-In-A-Row slim.js</title>
+    <script>
+        if (!(function() {return ('registerElement' in document
+                && 'import' in document.createElement('link')
+                && 'content' in document.createElement('template'))})()) {
+            let s = "<script type=\"text\/javascript\" " +
+                    "src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js\"" +
+                    " > <\/script> "
+            document.write(s)
+        }
+    </script>
+    <script src="../../Slim.js"></script>
+    <script src="../../framework/components/s-ui-base.js"></script>
+</head>
+<body>
+
+
+
+
+<script>
+    Slim.tag('fiar-app', class extends Slim {
+
+
+        get template() {
+            return `
+<fiar-col slim-repeat="rows" add="onAdded"></fiar-col>`
+        }
+
+        onBeforeCreated() {
+            this.rows = [[],[],[],[],[],[],[],[]]
+            this.rows.getNext = () => {
+                this.next = this.next === 'X' ? 'O' : 'X'
+                return this.next
+            }
+        }
+
+        onAdded() {
+
+        }
+    })
+
+
+    Slim.tag('fiar-col', class extends SlimUIBase {
+
+        get template() {
+            return `<div><button slim-id="play">+</button><span slim-repeat="data" bind>[[data]]</span></div>`
+        }
+
+        onAfterRender() {
+            this.play.onclick = () => {
+                this.data.push(this.data_source.getNext())
+                this.update()
+                this.callAttribute('add')
+            }
+        }
+
+    })
+</script>
+
+
+<fiar-app></fiar-app>
+</body>
+</html>
\ No newline at end of file
diff --git a/example/TodoList/TodoExample.html b/example/TodoList/TodoExample.html
index 2c9e9b4..a255e7a 100644
--- a/example/TodoList/TodoExample.html
+++ b/example/TodoList/TodoExample.html
@@ -24,15 +24,72 @@
     <script src="../../Slim.js"></script>
 
     <style>
-    todo-item span[complete="true"] {
-        text-decoration: line-through;
-    }
+
+        body {
+            font-family: 'Verdana', sans-serif;
+        }
+
+        *:focus {
+            outline: none;
+        }
+
+        div#todo-container{
+            width: 30em;
+            margin: 0 auto;
+            border: 1px solid black;
+            padding: 1em;
+            box-sizing: border-box;
+        }
+
+        #add-todo, #todos-count {
+            display: flex;
+            flex-direction: row;
+            height: 2em;
+        }
+
+        #todos-count span {
+            flex: 1;
+            align-self: flex-end;
+        }
+
+        h6 {
+            width: 30em;
+            display: block;
+            margin: 0 auto;
+        }
+
+        #add-todo input[slim-id="newTodo"] {
+            flex: 1;
+            border: 1px solid black;
+            border-right: none;
+        }
+
+        input[slim-id="btnNewTodo"], input[slim-id="btnClear"] {
+            border: 1px solid black;
+            border-radius: 0;
+        }
+
+        input[slim-id="btnNewTodo"] {
+            background-color: darkgreen;
+            color: white;
+        }
+
+        todo-item span[complete="true"] {
+            text-decoration: line-through;
+            background-color: gold;
+        }
+
+        code {
+            display: block;
+            background-color: whitesmoke;
+            padding: 0.5em;
+        }
     </style>
 </head>
 <body>
 
-    <h1>Todo Example</h1>
     <todo-app></todo-app>
+    <h6>View the source to see how it works</h6>
 
 <script>
 
@@ -66,12 +123,16 @@ <h1>Todo Example</h1>
 
         get template() {
             return `<div id="todo-container">
-                    <input type="text" slim-id="newTodo" /><input type="button" slim-id="btnNewTodo" value="Add Todo" />
-                    <hr/>
-                    <todo-item slim-repeat="todos"></todo-item>
-                    <hr/>
-                    <div id="todos-count"><span bind>You have [[todos.length]] items</span><input type="button" slim-id="btnClear" value="Clear completed"></input></div>
-                    `
+<h1>slim.js Todo Example</h1>
+<div id="add-todo">
+    <input type="text" slim-id="newTodo" />
+    <input type="button" slim-id="btnNewTodo" value="Add Todo" />
+</div>
+<hr/>
+<todo-item slim-repeat="todos"></todo-item>
+<hr/>
+<div id="todos-count"><span bind>You have [[todos.length]] items</span><input type="button" slim-id="btnClear" value="Clear completed"></input></div>
+`
         }
 
         onBeforeCreated() {
diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js
index 1765cfb..3557a39 100644
--- a/example/tests/bind-parent.js
+++ b/example/tests/bind-parent.js
@@ -5,10 +5,10 @@ Slim.tag('bind-parent', class extends Slim {
 <div calc="[[calcMinus(myProp, urProp)]]"><span minus="[calcMinus(myProp, urProp)]" bind>[[wProp]]</div>
 <div slim-repeat="items" bind>[[data.label]] >>> [[data.value]]</div>
 <hr/>
-<bind-child slim-repeat="items" a-prop="[myProp]" b-prop="[urProp]"></bind-child>
+<bind-child slim-repeat="items" a-prop="[[myProp]]" b-prop="[[urProp]]"></bind-child>
 <br/>
 <hr/>
-<tree-list bind-wprop="[[wprop]]" slim-repeat="tree"></tree-list>
+<tree-list bind-wprop="[[wProp]]" slim-repeat="tree"></tree-list>
 `
     }
 
diff --git a/example/webpage/index.html b/example/webpage/index.html
index c808994..8951e1b 100644
--- a/example/webpage/index.html
+++ b/example/webpage/index.html
@@ -139,7 +139,7 @@ <h2>Featuring</h2>
     <div>
         <slim-tabs tabs="Data Binding,Attribute Binding,Method Binding,Repeaters,Plugins">
             <div class="tabs">
-                <slim-tab slim-repeat="tabs"></slim-tab>
+                <slim-tab slim-repeat="tabs" select="select"></slim-tab>
             </div>
             <div id="states-container">
                 <slim-states slim-id="states" current-state="Data Binding">
diff --git a/example/webpage/slim-tabs.js b/example/webpage/slim-tabs.js
index c097baa..b621e06 100644
--- a/example/webpage/slim-tabs.js
+++ b/example/webpage/slim-tabs.js
@@ -4,19 +4,24 @@ Slim.tag('slim-tabs', class extends Slim {
         this.tabs = this.getAttribute('tabs').split(',')
     }
 
-    update() {
-        super.update()
-        this.findAll('slim-tab').forEach( tab => {
-            tab.onclick = (e) => {
-                this.states.currentState = tab.find('span').tabName
-            }
-        })
+    select(value) {
+        this.states.currentState = value
     }
 
 })
 
 Slim.tag('slim-tab', class extends Slim {
     get template() {
-        return '<span tab-name="[[data]]" bind>[[data]] </span>'
+        return '<span bind>[[data]] </span>'
+    }
+
+    onAfterRender() {
+        this.onclick = () => {
+            this.callAttribute('select', this.data)
+        }
+    }
+
+    get isSlim() {
+        return true
     }
 })
\ No newline at end of file
diff --git a/framework/components/basic-elements.js b/framework/components/basic-elements.js
index 21932c7..432dab1 100644
--- a/framework/components/basic-elements.js
+++ b/framework/components/basic-elements.js
@@ -53,130 +53,6 @@ Slim.tag('s-input-model', class extends SlimModel {
 })
 
 
-/**
- *
- *
- * s-hgroup
- */
-Slim.tag('s-hgroup', class extends HTMLElement {
-    createdCallback() {
-        this.style.display = 'flex'
-        this.style.flexDirection = 'row'
-    }
-})
-
-
-/**
- *
- *
- * s-vgroup
- */
-Slim.tag('s-vgroup', class extends HTMLElement {
-
-    createdCallback() {
-        this.style.display = 'flex'
-        this.style.flexDirection = 'column'
-    }
-
-})
-
-
-Slim.tag('s-resource', class extends Slim {
-
-
-    get url() {
-        return this.getAttribute('url')
-    }
-
-    get format() {
-        return this.getAttribute('format') || 'text'
-    }
-
-    get interval() {
-        return parseInt(this.getAttribute('interval') || 0)
-    }
-
-    attributeChangedCallback() {
-        this.stopInterval()
-        this.startInterval()
-    }
-
-    startInterval() {
-        if (this.interval > 0) {
-            this.resourceInterval = setInterval( () => {
-                if (!this.isLoading) this.load()
-            }, this.interval)
-        }
-        this.load()
-    }
-
-    stopInterval() {
-        if (this.resourceInterval) {
-            clearInterval(this.resourceInterval)
-        }
-    }
-
-    onBeforeCreated() {
-        this.isLoading = false;
-    }
-
-    onAfterRender() {
-        this.stopInterval()
-        this.startInterval()
-    }
-
-    get data() {
-        return this._data
-    }
-
-    set data(value) {
-        this._data = value
-        let fnName = this.ondata || this.getAttribute('ondata')
-        if (typeof fnName === 'function') {
-            fnName(value)
-        } else if (typeof this._boundParent[fnName] === 'function') {
-            this._boundParent[fnName](value)
-        }
-        this.isLoading = false
-    }
-
-    handleError(err) {
-        let fnName = this.onerror || this.getAttribute('onerror')
-        if (typeof fnName === 'function') {
-            fnName(err)
-        } else if (typeof this._boundParent[fnName] === 'function') {
-            this._boundParent[fnName](err)
-        }
-        this.isLoading = false
-    }
-
-    load() {
-        this.isLoading = true
-        if (this.url) {
-            fetch(this.url)
-                .then(response => {
-                    if (this.format.toLowerCase() === 'json') {
-                        return response.json()
-                    } else {
-                        return response.text()
-                    }
-                })
-                .then( data => {
-                    this.data = data
-                    return this.data
-                })
-                .catch( err => {
-                    this.handleError(err)
-                })
-        }
-    }
-
-    removedCallback() {
-        this.stopInterval()
-    }
-
-
-})
 
 
 
diff --git a/framework/components/group.js b/framework/components/group.js
new file mode 100644
index 0000000..a332c04
--- /dev/null
+++ b/framework/components/group.js
@@ -0,0 +1,26 @@
+/**
+ *
+ *
+ * s-hgroup
+ */
+Slim.tag('s-hgroup', class extends HTMLElement {
+    createdCallback() {
+        this.style.display = 'flex'
+        this.style.flexDirection = 'row'
+    }
+})
+
+
+/**
+ *
+ *
+ * s-vgroup
+ */
+Slim.tag('s-vgroup', class extends HTMLElement {
+
+    createdCallback() {
+        this.style.display = 'flex'
+        this.style.flexDirection = 'column'
+    }
+
+})
\ No newline at end of file
diff --git a/framework/components/s-resource.js b/framework/components/s-resource.js
new file mode 100644
index 0000000..52caaad
--- /dev/null
+++ b/framework/components/s-resource.js
@@ -0,0 +1,89 @@
+class SlimResource extends Slim {
+
+
+    get url() {
+        return this.getAttribute('url')
+    }
+
+    get format() {
+        return this.getAttribute('format') || 'text'
+    }
+
+    get interval() {
+        return parseInt(this.getAttribute('interval') || 0)
+    }
+
+    attributeChangedCallback() {
+        this.stopInterval()
+        this.startInterval()
+    }
+
+    startInterval() {
+        if (this.interval > 0) {
+            this.resourceInterval = setInterval( () => {
+                if (!this.isLoading) this.load()
+            }, this.interval)
+        }
+        this.load()
+    }
+
+    stopInterval() {
+        if (this.resourceInterval) {
+            clearInterval(this.resourceInterval)
+        }
+    }
+
+    onBeforeCreated() {
+        this.isLoading = false;
+    }
+
+    onAfterRender() {
+        this.stopInterval()
+        this.startInterval()
+    }
+
+    get data() {
+        return this._data
+    }
+
+    set data(value) {
+        this._data = value
+        this.callAttribute('ondata', value)
+        this.isLoading = false
+    }
+
+    handleError(err) {
+        let fnName = this.onerror || this.getAttribute('onerror')
+        this.callAttribute('onerror', err)
+        this.isLoading = false
+    }
+
+    load(options) {
+        this.isLoading = true
+        if (this.url) {
+            fetch(this.url, options)
+                .then(response => {
+                    if (this.format.toLowerCase() === 'json') {
+                        return response.json()
+                    } else {
+                        return response.text()
+                    }
+                })
+                .then( data => {
+                    this.data = data
+                    return this.data
+                })
+                .catch( err => {
+                    this.handleError(err)
+                })
+        }
+    }
+
+    removedCallback() {
+        this.stopInterval()
+    }
+
+
+}
+
+Slim.tag('s-resource', SlimResource)
diff --git a/framework/components/s-ui-base.js b/framework/components/s-ui-base.js
index 422bc6d..2f88ad1 100644
--- a/framework/components/s-ui-base.js
+++ b/framework/components/s-ui-base.js
@@ -11,19 +11,12 @@ class SlimUIBase extends Slim {
 
     attributeChangedCallback(attr, val) {
         if (this.hasOwnProperty(attr)) {
-            this[attr] = val
-        }
-    }
-
-    executeEvent(attr, e) {
-        let fnName = this.getAttribute(attr)
-        if (fnName && typeof this._boundParent[ fnName ] === 'function') {
-            this._boundParent[ fnName ](e)
+            this[Slim.__dashToCamel(attr)] = val
         }
     }
 
     handleEvent(e) {
-        this.executeEvent(e.type, e)
+        this.callAttribute(e.type, e)
     }
 
 
diff --git a/framework/tests/ElementsTest.html b/framework/tests/ElementsTest.html
index a4aa4c1..21944af 100644
--- a/framework/tests/ElementsTest.html
+++ b/framework/tests/ElementsTest.html
@@ -3,10 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <title>Slim elements test</title>
+    <script>
+        if (!(function() {return 'fetch' in window})()) {
+            let s = "<script type=\"text\/javascript\" " +
+                    "src=\"https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js\"" +
+                    " > <\/script> "
+            document.write(s)
+        }
+    </script>
+    <script>
+        if (!(function() {return ('registerElement' in document
+                && 'import' in document.createElement('link')
+                && 'content' in document.createElement('template'))})()) {
+            let s = "<script type=\"text\/javascript\" " +
+                    "src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js\"" +
+                    " > <\/script> "
+            document.write(s)
+        }
+    </script>
 
     <script src="../../Slim.js"></script>
     <script src="../components/s-ui-base.js"></script>
     <script src="../components/basic-elements.js"></script>
+    <script src="../components/s-resource.js"></script>
+    <script src="../components/group.js"></script>
     <script src="slim-ui-test.js"></script>
 </head>
 <body>
