The qualified name provided ('clipPath"') contains the invalid character '"'.

[dy]

Trying to render @stdlib/plot with nanohtml

import Plot from '@stdlib/plot/ctor'
import html from 'nanohtml'
let plot = new Plot([[0,1,2]], [[0,2,1]])
document.body.appendChild(html(plot.render('html')))

getting

Uncaught (in promise) DOMException: Failed to execute 'setAttributeNS' on 'Element': The qualified name provided ('clipPath"') contains the invalid character '"'.

The HTML generated by plot is

<svg property="canvas" class="canvas" width="400" height="400"><defs><clippath id="964444269"><rect class="clipPath" width="290" height="240"></rect></clippath></defs><g property="graph" class="graph" transform="translate(90,80)"><rect class="background" x="0" y="0" width="290" height="240" fill="none" stroke="none"></rect><g property="marks" class="marks" clip-path="url(#964444269)"><path property="line" class="path line" d="M0,240L145,0L290,120" fill="none" stroke="#1f77b4" stroke-width="2" stroke-opacity="0.9" stroke-dasharray="-" data-label=""></path></g><g property="axis" class="axis x" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" transform="translate(0,240)"><path property="axis.domain" class="domain" fill="none" stroke="#aaa" stroke-width="1" d="M0.5,6V0.5H290.5V6"></path><g property="axis.tick" class="tick" opacity="1" transform="translate(0,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">0.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(72.5,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">0.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(145,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">1.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(217.5,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">1.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(290,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">2.0</text></g><text property="axis.label" class="label noselect" fill="#000" stroke="none" text-anchor="middle" transform="rotate(0)" x="145" y="45">x</text></g><g property="axis" class="axis y" fill="none" font-size="10" font-family="sans-serif" text-anchor="end" transform="translate(0,0)"><path property="axis.domain" class="domain" fill="none" stroke="none" stroke-width="1" d="M-6,240.5H0.5V0.5H-6"></path><g property="axis.tick" class="tick" opacity="1" transform="translate(0,240)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">0.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,180)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">0.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,120)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">1.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,60)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">1.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,0)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">2.0</text></g><text property="axis.label" class="label noselect" fill="#000" stroke="none" text-anchor="middle" transform="rotate(-90)" x="-120" y="-72">y</text></g></g><g property="annotations" class="annotations" transform="translate(0,0)"><text property="title" class="title noselect" x="235" y="40" text-anchor="middle"></text></g></svg>

[goto-bus-stop]

the main nanohtml module is written as a template tag so it expects an array in the first parameter. For raw HTML, the raw() function is a more appropriate option:

var raw = require('nanohtml/raw')
var domElement = raw(plot.render('html'))