Colon problem when using XSLT to create Vue.js components

Question

I'm working on converting from XML to Vue.js templates. However, I ran into trouble when I tried to create Vuetify's v-tooltip component.

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>

Estimated generation:

<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 due to colon in <xsl:attribute name="v-slot:activator"> When I remove the colon like <xsl:attribute name="v-slotactivator"> I confirm that the XSLT transformation occurs, so the only cause of the error is definitely the colon.

Several other articles point out using variant inserts like <xsl:attribute name="v-slot:activator"> :activator<xsl:text> or <xs l :text disable output escape="yes" ">v-slot:activator<xsl:text>, or name ="{concat('v-slot',':','activator')}", none of them work.

Is there any solution to this problem? Or simply can't do it?

Thanks,

Answer 1

Actually, I kind of figured it out on my own, although this is more of a workaround.

I use XSLTProcessor in JS to generate Vue.js code. By using this class I can get the DOM as the conversion result. I managed to manipulate DOM after XSLT transformation.

This is what I did:

First, in the XSLT code, I added an id attribute with 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 the JS code, I changed the attribute and value using the setAttribute() method with the id value set in the XSLT (and removeAttribute() method and remove the id attribute) as follows:

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! v-icon appears on the browser and v-tooltip is working!