Saxon » SaxonJS

I have tried to see whether Saxon-JS 2.3 allows to replace the contents of the html root element of an HTML DOM document loaded in the browser, using e.g. xsl:result-document href="?." method="ixsl:replace-content":

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="3.0"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  exclude-result-prefixes="#all"
  xmlns:ixsl="http://saxonica.com/ns/interactiveXSLT"
  xmlns:saxon="http://saxon.sf.net/"
  expand-text="yes">

  <xsl:param name="counter" as="xs:integer" select="1"/>

  <xsl:template match="html">
    <xsl:result-document href="?." method="ixsl:replace-content">
      <xsl:apply-templates/>
    </xsl:result-document>
  </xsl:template>

  <xsl:template match="title/text()">
    <xsl:value-of select="replace(., '[0-9]+', string((//input[@id = 'button1'] => ixsl:get('dataset'))?counter + 1))"/>
  </xsl:template>
  
  <xsl:template match="input[@type = 'button']/@value">
    <xsl:attribute name="{name()}" select="'test ' || (.. => ixsl:get('dataset'))?counter + 1"/>
  </xsl:template>

  <xsl:template match="input[@type = 'button']/@data-counter">
    <xsl:attribute name="{name()}" select=". + 1"/>
  </xsl:template>

  <xsl:output method="html" html-version="5"/>

  <xsl:mode on-no-match="shallow-copy"/>

  <xsl:template match="input[@type = 'button' and @id = 'button1']" mode="ixsl:onclick">
     <xsl:apply-templates select="/html"/>
  </xsl:template>

  <xsl:template match="/" name="xsl:initial-template">
    <h1>Test</h1>
    <p>Run with {system-property('xsl:product-name')} {system-property('xsl:product-version')} {system-property('Q{http://saxon.sf.net/}platform')} at {saxon:timestamp()}.</p>
    <input type="button" id="button1" value="test {$counter}" data-counter="{$counter}"/>
  </xsl:template>

</xsl:stylesheet>

but I notice, that somehow, the new contents I want to insert to replace the old, is added to the DOM tree, but after each replace there are empty head and body elements inserted or left. That way the whole approach doesn't work well as the duplicated head and body (those stray empty ones and the newly inserted ones) mess up the rendering of the page.

Example test page is at https://martin-honnen.github.io/xslt/2022/replaceHtmlElementContents1.html, it uses above stylesheet which on the initial load and run through the script inserts some button you can click to test the attempt to replace the contents of the html element; if you open the browser console and the tree view you can see that after each click the html element node has additional empty head and body elements before the head and body with the contents the stylesheet attempts to insert. Tests where done with Google Chrome.

Used files are at https://github.com/martin-honnen/martin-honnen.github.io/blob/master/xslt/2022/replaceHtmlElementContents1.html, https://github.com/martin-honnen/martin-honnen.github.io/blob/master/xslt/2022/replaceBodyContentsTest1.xsl, https://github.com/martin-honnen/martin-honnen.github.io/blob/master/xslt/2022/replaceBodyContentsTest1.xsl.sef.json