Self closing component tags in ui-template hang the dashboard

[Steve-Mcl]

Current Behavior

A ui-template widget using self-closing syntax on a custom/Vuetify component
that has an adjacent v-else can hang the dashboard page on load, sometimes
taking any embedded Node-RED editor down with it too. Changing the same tag
to an explicit open/close pair fixes it.

FWIW, i did some digging:

Root cause

parseCustomTemplate() in UITemplate.vue extracts the <template> block with
the browser's native HTML parser (DOMParser().parseFromString(format, 'text/html')). HTML5 only honours self closing syntax on real void elements
(br, img, etc). For an unknown custom element like v-btn, the parser ignores
the trailing / and keeps the tag open, so v-icon parses as v-btn's child
instead of its sibling. That breaks Vue's requirement that v-else sit on the
immediate next sibling of the v-if element, and the widget hangs instead of
rendering.

In short, blocks need depth aware scanning (not a naive regex) to detect and fail or fix

Expected Behavior

should not hang!

Steps To Reproduce

Repro - add to a ui-template, deploy and open dashboard.

<template>
  <v-card>
    <v-btn v-if="show" icon="mdi-check-circle-outline" @click="show = false" />
    <v-icon v-else>mdi-check-circle</v-icon>
  </v-card>
</template>
<script>
export default {
  data () { return { show: true } }
}
</script>

Environment

• Dashboard version: current / live
• Node-RED version:
• Node.js version:
• npm version:
• Platform/OS:
• Browser:

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate