自定义组件textContent报错：this.shadowRoot.getElementById(...).textContent is not a function

你踩了一个很常见的JavaScript小坑——textContent是DOM元素的属性，不是可调用的方法，这就是触发错误的核心原因。

看你出错的代码行：

this.shadowRoot.getElementById("dd").textContent("Error")

你把textContent当成函数来调用了，但实际上它是一个用于读取或设置元素文本内容的属性，正确的写法应该是赋值操作：

this.shadowRoot.getElementById("dd").textContent = "Error"

修正后的完整connectedCallback代码： #

connectedCallback(){ 
  let tipo_boxo = this.getAttribute("tipo"); // 注意：你标签里用的是`tipo="success"`，原代码取的是`"type"`，建议统一属性名
  this.shadowRoot.querySelector(".boxo").classList.add(tipo_boxo); 
  let image = this.getAttribute("iconimg"); 
  this.shadowRoot.querySelector('.ico').style.backgroundImage = `url(${image})`; // 用模板字符串写法更简洁
  let main_type = this.getAttribute("main-type"); 
  this.shadowRoot.querySelector(".main-type").classList.add(main_type); 
  // 修正textContent的使用方式
  this.shadowRoot.getElementById("dd").textContent = "Error"; 
}

另外补充一个小细节：你自定义元素标签里写的是tipo="success"，但原代码里用的是this.getAttribute("type")，这里属性名不匹配，会导致.boxo元素无法正确添加success类，建议把代码里的"type"改成"tipo"，和标签属性保持一致，避免后续样式不生效的问题。

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