Merge pull request #1320 from earnubs/template-query-selector-support

Template querySelector support

Author: lmiller1990

packages/shared/compile-template.js

@@ -17,6 +17,16 @@ export function compileFromString(str: string) {
 
 export function compileTemplate(component: Component): void {
   if (component.template) {
+    if (component.template.charAt('#') === '#') {
+      var el = document.querySelector(component.template)
+      if (!el) {
+        throwError('Cannot find element' + component.template)
+
+        el = document.createElement('div')
+      }
+      component.template = el.innerHTML
+    }
+
     Object.assign(component, compileToFunctions(component.template))
   }
 

test/specs/mount.spec.js

@@ -161,6 +161,25 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
     expect(wrapper.html()).to.equal(`<div>foo</div>`)
   })
 
+  itDoNotRunIf(
+    !(navigator.userAgent.includes && navigator.userAgent.includes('node.js')),
+    'compiles templates from querySelector',
+    () => {
+      const template = window.createElement('div')
+      template.setAttribute('id', 'foo')
+      template.innerHTML = '<div>foo</div>'
+      window.document.body.appendChild(template)
+
+      const wrapper = mount({
+        template: '#foo'
+      })
+      expect(wrapper.vm).to.be.an('object')
+      expect(wrapper.html()).to.equal(`<div>foo</div>`)
+
+      window.body.removeChild(template)
+    }
+  )
+
   itDoNotRunIf(vueVersion < 2.3, 'overrides methods', () => {
     const stub = sandbox.stub()
     const TestComponent = Vue.extend({