XSLT Component

This custom HTML component takes an xml source and an xsl style and then renders the output. Here is more information about xsl transforms: From MDN, From W3.org and From w3schools.

How to use

Import the x-s-l-t.min.js file and include the style and xml like so:

<script src="https://lindseymysse.com/x-s-l-t/dist/x-s-l-t.min.js" type="module"></script>

<x-l-s-t xml-src="data.xml" xsl-src="style.xsl"></x-l-s-t>
      

Our xml looks like this:

  <?xml version="1.0" encoding="UTF-8"?>
  <catalog>
    <cd>
      <title>Empire Burlesque</title>
      <artist>Bob Dylan</artist>
      <country>USA</country>
      <company>Columbia</company>
      <price>10.90</price>
      <year>1985</year>
    </cd>
    <cd>
      <title>Hide your heart</title>
      <artist>Bonnie Tyler</artist>
      <country>UK</country>
      <company>CBS Records</company>
      <price>9.90</price>
      <year>1988</year>
    </cd>
    ...
    </cd>
  </catalog>
      

Our xsl style looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <xsl:for-each select="catalog/cd">
      <p>
        <b><xsl:value-of select="title" /></b>:
        <xsl:value-of select="artist" />
      </p>
    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>
      

This renders: