I am attempting to create a custom shadow DOM element that retrieves its HTML content from an HTML file located in a components folder. I have successfully retrieved the HTML using the following code:
$.get( "/component/miniPlayer.html", function( data ) {
console.log(data)
root.innerHTML = data;
});
However, when I try to insert this HTML into the custom element like so:
class miniPlayer extends HTMLElement{
constructor(){
super();
this._root = this.attachShadow({mode: 'open'});
this._root.innerHTML =
$.get( "/component/miniPlayer.html", function( data ) {
console.log(data)
this._root.innerHTML = data;
});
}
}
window.customElements.define('mini-player', miniPlayer);
An error occurs stating
Uncaught TypeError: Cannot set property 'innerHTML' of undefined