LightOrDark component does not support v-click

[JessSaavedra]

Describe the bug
Using v-click in the component LightOrDark does not work as intended

Minimal reproduction

Steps to reproduce the behavior:

1. Use LightOrDark component in a slide
2. Add v-click to it
3. Go to corresponding slide in presentation, you will notice the corresponding element is rendered, but it behaves as an element without v-click

Example:

<LightOrDark v-click>
    <template #dark="props">
        Dark mode
    </template>
    <template #light="props">
        Light mode
    </template>
</LightOrDark>

Environment

• Slidev version: 52.1.0
• Browser: Google Chrome
• OS: Mac OS

[elecmonkey]

The v-click directive treats the target element as an HTMLElement when mounted, and toggles a series of slidev-vclick-* style classes on it. This requires the node the directive is applied to be an actual DOM element. The LightOrDark template only renders two slots without wrapping them in any real DOM element. Therefore, applying v-click directly to will not take effect. Maybe we can wrap it in an element or adding v-click directly to the nodes inside the slot.

[elecmonkey]

A possible approach: wrap a real element inside the component and forward the attrs when LightOrDark has attrs on itself