Shadow DOM中HTML标签onclick绑定自定义元素方法报错求助

问题根源 #

Shadow DOM 内部的内联 onclick 代码运行在全局作用域中，而你的 removeFile 是自定义元素实例的方法，全局作用域找不到这个方法，所以触发ReferenceError。

解决方案 #

修改内联 onclick 的代码，通过触发元素的 getRootNode().host 获取自定义元素实例，再调用实例上的 removeFile 方法：

<i class="fa-solid fa-xmark" id="icon-size" file="${name}" onclick="this.getRootNode().host.removeFile('${name}')"></i>

修正后的完整代码 #

同时要修复代码里的其他问题：

• progressArea 和 uploadedArea 未声明，会变成全局变量，需添加const声明
• 构造函数里存在多余的});，需要删除
• removeFile方法里要通过this.shadowRoot获取元素，避免依赖全局变量

修正后的代码示例：

const template = document.createElement('template');
template.innerHTML = `
    <section class="progress-area"></section>
    <section class="uploaded-area"></section>
`

class writePostModal extends HTMLElement {
    constructor(){
        super();
        // 创建Shadow根节点
        this.attachShadow({ mode: "open" });
        this.shadowRoot.appendChild(template.content.cloneNode(true));

        const progressArea = this.shadowRoot.querySelector(".progress-area"),
              uploadedArea = this.shadowRoot.querySelector(".uploaded-area");
        
        uploadedArea.classList.add("onprogress");
        // 假设progressHTML、loaded、total、name、fileSize已在当前作用域定义
        progressArea.innerHTML = progressHTML;
        if (loaded == total) {
            progressArea.innerHTML = "";
            let uploadedHTML = `<li class="row" file="${name}">
                                <div class="content upload">
                                  <i class="fas fa-file-alt"></i>
                                  <div class="details">
                                    <span class="name">${name} • Uploaded</span>
                                    <span class="size">${fileSize}</span>
                                  </div>
                                </div>
                                <i class="fa-solid fa-xmark" id="icon-size" file="${name}" onclick="this.getRootNode().host.removeFile('${name}')"></i>
                                </li>`;
            uploadedArea.classList.remove("onprogress");
            uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
        }
    }
    
    removeFile(name) {
        const uploadedArea = this.shadowRoot.querySelector(".uploaded-area");
        const deleteFile = uploadedArea.querySelector(`li[file="${name}"]`);
        console.log(deleteFile);
        deleteFile?.remove(); // 可选：添加?.避免找不到元素时报错
    }
}

// 注册自定义元素
customElements.define('write-post-modal', writePostModal);

补充说明 #

• this.getRootNode() 返回当前元素所在的ShadowRoot，host属性指向挂载该ShadowRoot的自定义元素实例
• 确保name变量的值不包含单引号，否则会破坏onclick内的字符串语法，可提前对name做转义处理

内容的提问来源于stack exchange，提问作者CopperCleric