时间戳

首页 > 解决方案 > this.shadowRoot.getElementById(...).textContent 不是函数

javascript - this.shadowRoot.getElementById(...).textContent 不是函数

问题描述

你好我正在尝试创建我的第一个自定义组件

这是我的模板

     <div class="wrap-boxo">
  <div class="boxo">
    <div class="top-boxo">
      <div class="pal focussed"></div>
      <div class="pal"></div>  
    </div>
  <div class="message">
    <div class="left-boxo">

    <div class="icon">
      <div class="ico"></div>
      <div class="shd"></div>

    </div>

    <div class="type-mex">
      <h3 id="dd" class="main-type"></h3>
      <p class="main-det"></p>
    </div>

    <button> <h3 class="col-txt"> </h3> </button>

  </div>
  <div class="right-boxo">
    <p></p>

  </div>
  </div>

  </div>
</div>

在 connectedCallback() 我做我的设置

connectedCallback(){

      let tipo_boxo = this.getAttribute("type");
      this.shadowRoot.querySelector(".boxo").classList.add(type_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);
      this.shadowRoot.getElementById("dd").textContent("Error")
       

        }

它工作得很好，直到我尝试在 h3 中添加文本内容 this.shadowRoot.getElementById("dd").textContent("Error")生成错误

Uncaught TypeError: this.shadowRoot.getElementById(...).textContent is not a function
    at HTMLElement.connectedCallback (home.html:897)

我究竟做错了什么？

这是我的自定义元素，如果我执行 this.shadowRoot.getElementById("dd") 的控制台日志，我会在控制台中得到它，但是一旦我执行 textContent 或 innerHTML，我就会收到此错误

<bo-xo 
  mex="error"
  tipo="success" 
  main-type="errh3"
  iconimg="some-img.jpg">
</bo-xo>

标签： javascriptreactjsweb-componentgetelementbyidshadow-dom

解决方案

推荐阅读