custom elements first pass

src/compiler.js

@@ -220,7 +220,8 @@ CompilerProto.compile = function (node, root) {
         // special attributes to check
         var repeatExp,
             componentId,
-            partialId
+            partialId,
+            customElementFn = utils.elements[node.tagName.toLowerCase()]
 
         // It is important that we access these attributes
         // procedurally because the order matters.
@@ -239,21 +240,16 @@ CompilerProto.compile = function (node, root) {
                 compiler.bindDirective(directive)
             }
 
-        // sd-component has second highest priority
-        // and we preseve all other attributes as well.
+        // custom elements has 2nd highest priority
+        } else if (customElementFn) {
+
+            addChild(customElementFn)
+
+        // sd-component has 3rd highest priority
         } else if (!root && (componentId = utils.attr(node, 'component'))) {
 
             var ChildVM = compiler.getOption('components', componentId)
-            if (ChildVM) {
-                var child = new ChildVM({
-                    el: node,
-                    child: true,
-                    compilerOptions: {
-                        parentCompiler: compiler
-                    }
-                })
-                compiler.childCompilers.push(child.$compiler)
-            }
+            if (ChildVM) addChild(ChildVM)
 
         } else {
 
@@ -279,6 +275,22 @@ CompilerProto.compile = function (node, root) {
         compiler.compileTextNode(node)
 
     }
+
+    function addChild (Ctor) {
+        if (utils.isConstructor(Ctor)) {
+            var child = new Ctor({
+                el: node,
+                child: true,
+                compilerOptions: {
+                    parentCompiler: compiler
+                }
+            })
+            compiler.childCompilers.push(child.$compiler)
+        } else {
+            // simply call the function
+            Ctor(node)
+        }
+    }
 }
 
 /**

src/main.js

@@ -42,6 +42,15 @@ ViewModel.component = function (id, Ctor) {
     return this
 }
 
+/**
+ *  Allows user to register/retrieve a Custom element constructor
+ */
+ViewModel.element = function (id, Ctor) {
+    if (!Ctor) return utils.elements[id]
+    utils.elements[id] = utils.toConstructor(Ctor)
+    return this
+}
+
 /**
  *  Allows user to register/retrieve a template partial
  */

src/utils.js

@@ -22,6 +22,7 @@ var utils = module.exports = {
     components  : makeHash(),
     partials    : makeHash(),
     transitions : makeHash(),
+    elements    : makeHash(),
 
     /**
      *  get an attribute and remove it.
@@ -132,10 +133,17 @@ var utils = module.exports = {
      *  if it is not already one
      */
     toConstructor: function (obj) {
+        ViewModel = ViewModel || require('./viewmodel')
+        return utils.typeOf(obj) === 'Object'
+            ? ViewModel.extend(obj)
+            : typeof obj === 'function'
+                ? obj
+                : null
+    },
+
+    isConstructor: function (obj) {
         ViewModel = ViewModel || require('./viewmodel')
         return obj.prototype instanceof ViewModel || obj === ViewModel
-            ? obj
-            : ViewModel.extend(obj)
     },
 
     /**