How do I initialize the viewer on an element?

[tacman]

This is probably simple, but I'm missing how to do it.

I want to simply instantiate the viewer on an existing DOM element.

<div id="myDebug" data-json='{"first":"Bob"}' class="json-viewer">
json view here
</div>

Copying from the documentation, I'm doing this

                const jsonViewer = document.createElement("andypf-json-viewer")
                jsonViewer.id = "hit_" + this.hitId
                jsonViewer.expanded = 1
                jsonViewer.indent = 3
                jsonViewer.showDataTypes = false
                jsonViewer.theme = "monokai"
                jsonViewer.showToolbar = true
                jsonViewer.showSize = true
                jsonViewer.showCopy = true
                jsonViewer.expandIconType = "square"
                jsonViewer.data = clean

                this.contentTarget.innerHTML = "";
                this.contentTarget.appendChild(jsonViewer);

What I want to do is not create an element and append it to something else, but simply apply andypf-json-viewer to the element in javascript.

Thanks.