Allow HTML elements to be attached to DOM (#28)

* Allow HTML elements to be attached to DOM

src/framework-delegate.js

@@ -5,6 +5,16 @@ export default class Delegate {
 
   // Attach the passed Vue component to DOM
   attachViewToDom(parentElement, component, opts, classes) {
+    // Handle HTML elements
+    if (isElement(component)) {
+      // Add any classes to the element
+      addClasses(component, classes)
+
+      // Append the element to DOM
+      parentElement.appendChild(component)
+      return Promise.resolve(component)
+    }
+
     // Get the Vue controller
     return this.vueController(component).then(controller => {
       const vueComponent = this.vueComponent(controller, opts)
@@ -43,12 +53,20 @@ export default class Delegate {
   }
 }
 
+// Check Symbol support
 const hasSymbol = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol'
 
+// Check if object is an ES module
 function isESModule(obj) {
   return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module')
 }
 
+// Check if value is an Element
+function isElement(el) {
+  return typeof Element !== 'undefined' && el instanceof Element
+}
+
+// Add an array of classes to an element
 function addClasses(element, classes = []) {
   for (const cls of classes) {
     element.classList.add(cls)

test/framework-delegate.spec.js

@@ -52,6 +52,15 @@ describe('Framework delegation', () => {
     })
   })
 
+  it('Attaches HTML elements to DOM', () => {
+    expect.assertions(1)
+    const element = document.createElement('p')
+
+    return delegate.attachViewToDom(app, element, null, ['foo']).then(el => {
+      return expect(el.classList.contains('foo')).toBeTruthy()
+    })
+  })
+
   it('Removes from DOM', () => {
     expect.assertions(2)
     const div = document.querySelector('p')