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

[xanf]

I've originally encountered this issue while porting bootstrap-vue to Vue3

All known (at least to me and in mentioned stack overflow 😛 question) methods of checking if something is HTML reports false for <col><col><col> because <col> is considered valid tag only inside table -> colgroup

In order to fix that I simply removed check if it is HTML and always wrap slot provided as string into <SlotWrapper>
This has a downside - if code under test relies on knowing that slot will always have raw strings - it will be confused by wrapper. User could workaround it with passing slot as function:

slots: {
  'some-slot': () => h('Something which should be just plain old string')
}

I consider this way more rare case, and what is more important - people who manipulate slot contents in that way are usually far more expert to understand the root cause of the issue and to discover (or find this PR) workaround.

For original issue - it took me a while to realize why slot work for certain HTML string and does not work for another when the only difference is tag

[lmiller1990]

isHTML was introduced here: #599 I am surprised this did not break one of those tests.

This would technically be a breaking change (at least for existing V2 users). Any chance you could write something I can include in the release notes explain the breaking change and how to work around it? Just a paragraph with a snippet or two would be great.

[lmiller1990]

Seems reasonable, just left one comment - request for something to include in release notes explaining the breaking change.

[xanf]

This would technically be a breaking change (at least for existing V2 users). Any chance you could write something I can include in the release notes explain the breaking change and how to work around it? Just a paragraph with a snippet or two would be great.

Well, I'm not sure this is a breaking change. For me it feels more like a fix for perfectly valid use case:

 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')
    })

I've added this test in a recent commit.
WDYT of something like:

Note: if you're passing raw strings to a slot of the component - these are now always wrapped into helper component (previously wrapping occurred only if string contained HTML. If your component relies on raw string being passed to slot without any specific wrappers, pass render function to slot content wrapping your string in h():

 it('allows passing a scoped slot via string with no HTML inside without template tag', () => {
      const wrapper = mount(ComponentWithSlots, {
        slots: {
          // this one will be wrapped with helper component
          scoped: 'Just a plain string',
          // this one will be passed to slot as plain string
          otherScoped: () => h('Just a plain string'),
        }
      })

      expect(wrapper.find('.scoped').text()).toEqual('Just a plain true string')
    })

Feel free to edit this for making most easy-to-understand description

[xanf]

@lmiller1990 Ignore my explanation, if #844 this will effectively hide any "slot wrapper" stuff from end users, making this explanation wrong and unneeded

[lmiller1990]

LGTM I think - still a little uneasy, hope we won't break anything (eg if ppl are relying on some specific logic around slots[0].children).