Transform xml to html using xslt stylesheet

I have one sample XML & XSL resource. I am getting XML as a string from API call in javascript. While XSLT is present as a static resource on the server. My goal is to display XML content along with stylesheet in HTML document element.

I do not want to use XSLTProcessor for now. I would like to try the browser way. And yes both the XML and XSLT would be coming from the same server.

Code:

import XSL from '@salesforce/resourceUrl/Roles';

export default class DisplayReport extends LightningElement {

    renderedCallback(){
        var xml = '<root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>'; 
        
        var output = '<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="'+XSL+'" ?>'+xml;
        console.log(output); //output on below line
        
        //<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="/assets/project/b481ca5a6f/staticresources/Roles" ?><root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>
        
        var xmlNode = this.parseXml(output);        
        console.log(xmlNode);
        const element = this.template.querySelector('div.dms');
        element.appendChild(xmlNode.documentElement);
    }

    parseXml(xmlStr){
        if (window.DOMParser) {
            return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
        }
    }
}

Markup:

<template>
    <div class="dms" lwc:dom="manual">

    </div>
</template>

Output: (no style sheet getting applied)

one 1 2 two

Any idea what is missing here?