[feature request] new `v-slot` syntax does not support slot names that start with a square bracket `[` or names with spaces

What problem does this feature solve?

We use slot names that use a bracketed syntax (specifically for dynamic slot names) i.e. slot="[foo][bar]").

v-slot: currently supports slots names with square brackets, as long as they are not the first character of the slot name. i.e. v-slot:foo[bar]="scope" (works), but not v-slot:[foo][bar]="scope" (does not work)

HTML5 allows for custom attributes with square brackets in the attribute name, as long as they do not start with restricted characters. However, in the case of v-slot, the attribute starts with v, so slot names that start with [ should work as expected (i.e. v-slot:[foo.bar] or v-slot:[foo][bar])

Using the deprecated slot="[foo]" syntax works as expected.

What does the proposed API look like?

v-slot adds support for slot names that start with a [, such as v-slot:[foo][bar]="scope"

There is no actual change to the API from the user perspective, just a change to the underlying code.

My guess that this is an issue with Vue template compiler:

From the template compiler on the Vuejs.org site (https://vuejs.org/v2/guide/render-function.html#Template-Compilation):

Does not work:

Does Work:

[jacekkarczmarczyk]

@sirlancelot it works with backticks though (see my example), maybe it should be documented?

[tmorehouse]

It is too bad the new slot/scope syntax wasn’t split into two “directives”:

<!-- pass a string literal as the slot name -->
<template v-slot="'slotName'" v-scope="{ some, props, here }"></template>

<!-- pass a variable containing the slot name -->
<template v-slot="someVar" v-scope="{ some, props, here }"></template>

As this would retain case sensitivity on slot names (when using browser templates), allow spaces in slot names, and get around the restrictions that attribute names have (case insensitivity, special chars, and spaces)

Within render functions, one can always use this.$scopedSlots[slotname](scope)