Javascript 填充web组件模板并将函数传递给web组件的最佳方法？

因此，我构建了我的第一个web组件，一个非常简单的警告框。下面是它的外观（不包括样式）

现在，我想知道是否有更好的方法来呈现模板，而不必执行所有QuerySelector并将数据直接放入模板中。 与我那样附加事件侦听器不同的是，有一种方法可以将函数传递给组件，比如说，我希望按钮每次都有一个我在组件外部定义的不同函数，如何将该函数传递给组件

也许是这样的

   <bo-xo id="boxino-masterino" 
      mex="error"
      det-mex="something went wrong"
      ... 
      ...
      function1="dosomething()"
     function2="dosomethingelse(v1,v2...)"
    </bo-xo>

const template = document.createElement('template')
    template.innerHTML=`      <div class="wrap-boxo">
  <div class="boxo">
    <div class="top-boxo">
      <div class="pallino1 pal focussed"></div>
      <div class="pallino2 pal"></div>  
    </div>
  <div class="messaggio">
    <div class="left-boxo">

    <div class="icona">
      <div class="ico"></div>
      <div class="ombra"></div>

    </div>
    
    <div class="tipo-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>`
     class Boxo extends HTMLElement{
   constructor(){
     super();
    this.attachShadow({mode:'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true)); 
    var text = this.getAttribute('text');   
    var data = "boh"
   }

   slidalo(e){     
     e.target.classList.contains("pallino2") ? 
     (
       this.shadowRoot.querySelector(".left-boxo").classList.add("lr-100"),
       this.shadowRoot.querySelector(".right-boxo").classList.add("lr-100"),
       this.shadowRoot.querySelector(".pallino1").classList.remove("focussed"),
       this.shadowRoot.querySelector(".pallino2").classList.add("focussed")
     ) : 
     (
      this.shadowRoot.querySelector(".left-boxo").classList.remove("lr-100"),
       this.shadowRoot.querySelector(".right-boxo").classList.remove("lr-100"),
      this.shadowRoot.querySelector(".pallino1").classList.add("focussed"),
      this.shadowRoot.querySelector(".pallino2").classList.remove("focussed")
     );  
   }

   chiudi_box(e){
    let x = this.shadowRoot.querySelector(".wrap-boxo")
    x.style.opacity = 1;
    x.style.transition = "opacity .7s";
    x.style.opacity = 0;
    setTimeout(function(){
    x.remove(); 
     document.getElementById("boxino-masterino").remove();
  }, 1000);
  
  }
   settaggio_box(){
  let tipo_boxo = this.getAttribute("tipo");
  let immagine = this.getAttribute("iconimg");
  let main_type = this.getAttribute("main-type");
  let mex = this.getAttribute("mex")
  let det_mex = this.getAttribute( "det-mex" )
  let bott_mex = this.getAttribute("mess-botton");
  let colore_h3=this.getAttribute("colore-botton")
  let spieg_mex = this.getAttribute("spiegaz-err");
  this.shadowRoot.querySelector(".boxo").classList.add(tipo_boxo);
  this.shadowRoot.querySelector('.ico').style.backgroundImage= "url("+immagine+")";  
  this.shadowRoot.getElementById("dd").textContent= mex
  this.shadowRoot.querySelector(".tipo-mex p").textContent = det_mex
  this.shadowRoot.querySelector("button h3").classList.add(colore_h3)
  this.shadowRoot.querySelector("button h3").textContent = bott_mex;      
  this.shadowRoot.querySelector(".right-boxo p").textContent = spieg_mex; 
  this.shadowRoot.querySelector(".pallino1").addEventListener("click",this.slidalo.bind(this))
  this.shadowRoot.querySelector(".pallino2").addEventListener("click",this.slidalo.bind(this))
    /*EVENT LISTENER SUL PULSANTONE*/
  this.shadowRoot.querySelector("button").addEventListener("click",this.chiudi_box.bind(this))
  }
  
   connectedCallback(){
    this.settaggio_box();    
    }
    disconnectedCallback(){
      console.log("elemento cancellato")
      this.shadowRoot.removeEventListener("click",this.slidalo)
      this.shadowRoot.removeEventListener("click",this.chiudi_box)
    }
  }