將 ajax 調用中的 html 附加到 shadow DOM

Question

我正在嘗試使自定義 shadow dom 元素從存儲在 components 文件夾中的 HTML 文件中獲取其 HTML。 我可以像這樣得到 HTML

$.get( "/component/miniPlayer.html", function( data ) {
    console.log(data)
    root.innerHTML = data;
});

但是如果我然后嘗試這樣做以將 HTML 放在自定義元素中

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);

我收到一個錯誤Uncaught TypeError: Cannot set property 'innerHTML' of undefined我已經在許多不同的配置中嘗試過它，但無法讓它工作。 這是可能的，還是我將不得不嘗試其他的東西

Answer 1

this自己的函數中function(data) {...}回調是不一樣this是一個在constructor()因為的關閉。

您應該將原始引用保存在另一個變量中（即that ，或此處： elem ）。

class miniPlayer extends HTMLElement{
    constructor(){
        super();

        this._root = this.attachShadow({mode: 'open'});
        this._root.innerHTML = 

        var elem = this
        $.get( "/component/miniPlayer.html", function( data ) {
            console.log(data)
            elem._root.innerHTML = data;
        });
    }
}

window.customElements.define('mini-player', miniPlayer);