♻️ rework slot exchange between django/vue

[krmax44]

Before, every slot provided to a vue component via django html was stringified, then parsed again by the DOM. Now, a DOM copy of the <template> element is used instead (should improve performance).

To reduce confusion between Vue <slot>s and this, I propose to not use Vue syntax:

• Registering a template: <template data-slot="foo" /> instead of <template v-slot:foo />
• Rendering the slot: <django-slot name="foo" /> instead of <slot name="foo">

This also uses provide/inject instead of passing the slots as props, which has the additional benefit that <django-slot name="foo"> can be used even in nested components without passing down the slot.

When using createAppWithProps, I suggest we always use the Vue component's name as the identifier:

const els = document.querySelectorAll('document-uploader') // <document-uploader />

// instead of i.e. classes:
const els = document.querySelectorAll('.document-uploader') // <document-uploader class="document-uploader" />

[krmax44]

@stefanw the <div> is just a placeholder and should be replaced with the slot content (not wrapping it)

[krmax44]

It seems to me that there are no changes required in the other repos, as we apparently don't pass slots from Django to Vue there. Someone double-check though 😉