Colon issue when using XSLT to create Vue.js component

I am working on transforming from XML to a Vue.js template. However, when I try to create a v-tooltip component of Vuetify, I encounter trouble.

This XSLT code:

<xsl:element name="v-tooltip">
    <xsl:attribute name="bottom"/>
    <xsl:element name="template">
        <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute>
        <xsl:element name="v-icon">
            <xsl:attribute name="v-bind">attrs</xsl:attribute>
            <xsl:attribute name="v-on">on</xsl:attribute>
            mdi-home
        </xsl:element>
    </xsl:element>
    <xsl:element name="span">ToolTip</xsl:element>
</xsl:element>

is expected to generate:

<v-tooltip bottom>
  <template v-slot:activator="{ on, attrs }">
    <v-icon
      v-bind="attrs"
      v-on="on"
    >
      mdi-home
    </v-icon>
  </template>
  <span>Tooltip</span>
</v-tooltip>

but it causes an error because of colon in <xsl:attribute name="v-slot:activator"> When I erase colon like <xsl:attribute name="v-slotactivator">, I confirmed the XSLT transform occurred, so the only cause of the error is definitely the colon.

Several other articles indicate to use like <xsl:attribute name="v-slot&colon;activator">, useing a variant to insert <xsl:text>v-slot:activator<xsl:text> or <xsl:text disable-output-escaping="yes">v-slot:activator<xsl:text>, or name="{concat('v-slot',':','activator')}", neither which works.

Is there any workaround to resolve this issue? Or it is impossible to do it?

Thank you,

Solution 1:

Actually, I kinda self-solved, though it is more like a workaround.

I generate a Vue.js code using XSLTProcessor in JS. By using this class, I can get a DOM as a converted result. I manage to manipulate the DOM after XSLT conversion.

Here is what I have done:

Firstly, in the XSLT code, I added an id attribute that has a value of vslot (for example) to the template element. In short, I replaced <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> with <xsl:attribute name="id">vslot</xsl:attribute>.

Secondly, in JS code, I changed attributes and values using setAttribute() method with the id value set in the XSLT (and removeAttribute() method as well to delete id attribute) like this:

var xsltProcessor = new XSLTProcessor()
xsltProcessor.importStylesheet(xsl)
var doc = xsltProcessor.transformToDocument(xml)
doc.getElementById('vslot').setAttribute('v-slot:activator','{ on, attrs }')
doc.getElementById('vslot').removeAttribute('id')
var result = doc.documentElement.outerHTML

And, voila! The v-icon appeared on the browser with v-tooltip working!