diff --git a/src/mount.ts b/src/mount.ts index 390d21b9b..dbbdc4709 100644 --- a/src/mount.ts +++ b/src/mount.ts @@ -27,7 +27,6 @@ import { import { MountingOptions, Slot } from './types' import { isFunctionalComponent, - isHTML, isObjectComponent, mergeGlobalProperties, isObject @@ -281,14 +280,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.`) diff --git a/src/utils.ts b/src/utils.ts index 6087405a5..69b18b196 100644 --- a/src/utils.ts +++ b/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 diff --git a/tests/components/ComponentWithSlots.vue b/tests/components/ComponentWithSlots.vue index 3495f1035..e5353d127 100644 --- a/tests/components/ComponentWithSlots.vue +++ b/tests/components/ComponentWithSlots.vue @@ -12,6 +12,11 @@
+ + + + +
boolean: {{ aBoolean }} string: {{ aString }} object: {{ anObject }} diff --git a/tests/mountingOptions/slots.spec.ts b/tests/mountingOptions/slots.spec.ts index 958552002..49f2f34aa 100644 --- a/tests/mountingOptions/slots.spec.ts +++ b/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: '' + } + }) + + expect(wrapper.findAll('.insideTable col')).toHaveLength(3) + }) + it('supports providing a render function to slot', () => { const wrapper = mount(ComponentWithSlots, { slots: { @@ -181,6 +190,16 @@ describe('slots', () => { expect(wrapper.find('.scoped').text()).toEqual('Just a plain true string') }) + + it('allows passing a scoped slot via string with no HTML inside without template tag', () => { + const wrapper = mount(ComponentWithSlots, { + slots: { + scoped: 'Just a plain {{ params.aBoolean }} {{ params.aString }}' + } + }) + + expect(wrapper.find('.scoped').text()).toEqual('Just a plain true string') + }) }) it('supports an array of components', () => {