Styling XSLT-transformed XML output using CSS

input.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transform.xslt"?>
<persons>
	<person username="JS1">
		<name>John</name>
		<family-name>Smith</family-name>
	</person>
	<person username="MI1">
		<name>Morka</name>
		<family-name>Ismincius</family-name>
	</person>
</persons>

main.mjs

console.log("Module script loaded!");

style.css

root{
	font-weight: bold;
	max-width: 37.5rem;
	margin: 1em auto;
	background: #ddd;
	position: relative;
}
	root::before{
		box-shadow: 0 0 .5em #000;
		content: "";
		z-index: -1;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

name{
	display: block;
}

transform.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="3.0">
	<xsl:output method="xml"/>

	<xsl:template match="/">
		<xsl:processing-instruction name="xml-stylesheet">type="text/css" href="style.css"</xsl:processing-instruction>
		<xsl:apply-templates/>
	</xsl:template>

	<xsl:template match="/persons">
		<root>
			<html:script>import("./main.mjs");</html:script>
			<xsl:apply-templates select="person"/>
		</root>
	</xsl:template>

	<xsl:template match="person">
		<name username="{@username}">
			<xsl:value-of select="name" />
		</name>
	</xsl:template>
</xsl:stylesheet>