Template.QuerySelector inside Template Tag Not Working

Question

I am trying to render a jsonTree instead of just json text and have the following javascript code to do it (Note: It is in a switch statement):

                case 'LONGTEXT':
                this.isLongText = true;
                var wrapper = this.template.querySelector('[data-id="tree_destination"]');
                var treedata = JSON.parse(this.value);
                var tree = jsonTree.create(treedata, wrapper);
                
                break;

Here is the HTML:

     <template if:true={isLongText}>
            <div data-id="tree_destination">This is my tree.</div>
        </template>

I am quite new to all of this, so sorry if there is a trivial mistake. The library I am trying to use to get the tree can be found at this link: https://github.com/summerstyle/jsonTreeViewer or https://www.npmjs.com/package/json-tree-viewer

The error I am getting is "Unhandled Rejection (TypeError): Cannot read property 'appendChild' of null" and I am getting it on the jsonTree.create() line. I am almost 100% sure that it has to do with the wrapper, but I am not completely sure. When I do console.log of the wrapper, though, it returns null.

Thanks for the help in advance!

Answer 1

template elements aren't standard elements. To access their contents, you use the content property, which is a DocumentFragment. So change your querySelector to:

var wrapper = this.template.content.querySelector('[data-id="tree_destination"]');
// −−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^

const template = document.querySelector("template");
const div = template.content.querySelector('[data-id="tree_destination"]');
console.log(div);

<template if:true={isLongText}>
    <div data-id="tree_destination">This is my tree.</div>
</template>

Note that I can't guarantee that particular library is happen to render into a disconnected element, but this does solve the querySelector problem. :-)