I have this code below for my html
<template>
//do stuff
<template if:true={openModal}>
<ul>
//add dynamic list here
</ul>
</template>
</template>
My Javascript I use the renderedCallback() to dynamically append a list to the ul.
renderedCallback(){
if(!this.hasRendered && this.data){
//create a string of li elements called 'val' here
//append the 'val' to the ul element
this.template.querySelector('ul').innerHTML = val; //returns null;
}
}
When I go to run this the querySelect is returning null even though that ul exists in the html and the dom is loaded since renderedCallback is used for this purpose. Can someone please tell me why this is not working?
