背景图片网页组件

如何解决背景图片网页组件

您好，我已经开始研究Web组件，我正在尝试创建一种“警告框”，该警告框会在显示您是否成功处理了http请求的http请求之后弹出，所以我做了此基本设置

const template = document.createElement('template')
template.innerHTML =   `
  <style>
  .wrap-Boxo{
    display:flex;
    width:100vw;
    height:100vh;
    position:absolute;
    alig-items:center;
    justify-content:center;
  }
    .icon{
      background-size:cover;
      width:50px;
      height:50px;
    }
  </style>
  <div class="wrap-Boxo">
    <div class="Boxo">

    <div class="do1"></div>
    <div class="do2"></div>
    <div class="icon"></div>
    <div class="message">
      
    </div>

    </div>
  </div>
 `;

 class Boxo extends HTMLElement{
   constructor(){
     super();
     
    this.attachShadow({mode:'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true));
          this.shadowRoot.querySelector('.icon').backgroundImage = "url("+this.getAttribute('iconimg')+"";

   
   }
 }
 window.customElements.define('bo-xo',Boxo);

  <bo-xo iconimg ="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg"></bo-xo>

但是我没有在CSS规则中得到图像，我在做什么错了？