fix: Always wrap string passed to slot in a helper component

src/mount.ts

@@ -281,14 +281,7 @@ export function mount(
     }
 
     if (typeof slot === 'string') {
-      // if it is HTML we process and render it using h
-      if (isHTML(slot)) {
-        return (props: VNodeProps) => h(processSlot(slot), props)
-      }
-      // otherwise it is just a string so we just return it as-is
-      else {
-        return () => slot
-      }
+      return (props: VNodeProps) => h(processSlot(slot), props)
     }
 
     throw Error(`Invalid slot received.`)

src/utils.ts

@@ -93,20 +93,6 @@ export function isObjectComponent(
   return Boolean(component && typeof component === 'object')
 }
 
-// https://stackoverflow.com/questions/15458876/check-if-a-string-is-html-or-not/15458987#answer-15458968
-export function isHTML(str: string) {
-  var a = document.createElement('div')
-  a.innerHTML = str
-
-  for (let c = a.childNodes, i = c.length; i--; ) {
-    if (c[i].nodeType == 1) {
-      return true
-    }
-  }
-
-  return false
-}
-
 export function textContent(element: Element): string {
   // we check if the element is a comment first
   // to return an empty string in that case, instead of the comment content

tests/components/ComponentWithSlots.vue

@@ -12,6 +12,11 @@
     <div class="scoped">
       <slot name="scoped" v-bind="{ aBoolean, aString, anObject }" />
     </div>
+    <table class="insideTable">
+      <colgroup>
+        <slot name="insideTable" />
+      </colgroup>
+    </table>
     <div class="scopedWithDefault">
       <slot name="scopedWithDefault" v-bind="{ aBoolean, aString, anObject }">
         boolean: {{ aBoolean }} string: {{ aString }} object: {{ anObject }}

tests/mountingOptions/slots.spec.ts

@@ -16,7 +16,6 @@ describe('slots', () => {
           named: namedString
         }
       })
-      expect(wrapper.vm.$slots.default!()[0].children).toBe(defaultString)
       expect(wrapper.find('.default').text()).toBe(defaultString)
       expect(wrapper.find('.named').text()).toBe(namedString)
     })
@@ -36,6 +35,16 @@ describe('slots', () => {
       expect(wrapper.find('.namedNested').exists()).toBe(true)
     })
 
+    it('supports providing html string with tags valid only nested in some other tag', () => {
+      const wrapper = mount(ComponentWithSlots, {
+        slots: {
+          insideTable: '<col><col><col>'
+        }
+      })
+
+      expect(wrapper.findAll('.insideTable col')).toHaveLength(3)
+    })
+
     it('supports providing a render function to slot', () => {
       const wrapper = mount(ComponentWithSlots, {
         slots: {