Web组件无法监听外部事件及背景色不生效问题排查

一、事件接收失败的原因及修复 #

你当前在document上触发自定义事件，却在Web组件的shadowRoot上监听。事件冒泡是从触发元素向父级节点传播，document是DOM树的最顶层，事件不会向下传递到shadowRoot，所以监听器无法捕获到事件。

有两种可行的修复方式：

方式1：将监听器绑定到Web组件本身 #

把shadowRoot.addEventListener改成this.addEventListener，因为从document触发的冒泡事件会传递到Web组件元素，且你设置了composed: true，事件可以穿透Shadow DOM边界：

// 替换原监听代码
this.addEventListener(
  "hookban-test",
  (e) => console.log("test", e)
)

方式2：直接在Web组件元素上触发事件 #

如果不需要全局触发，直接获取Web组件元素并触发事件，这样即使不依赖composed属性，shadowRoot的监听器也能捕获到：

triggerEvtButton.onclick = () => {
  const container = document.querySelector("hookban-container")
  container.dispatchEvent(
    new CustomEvent("hookban-test", {
      bubbles: true,
      composed: true,
      detail: { content: "test" }
    })
  )
}

二、背景色不显示黄色的原因及修复 #

:host默认是inline元素，inline元素的背景色只会包裹内部内容的范围，不会占满父容器的宽度。只需给:host添加display: block（或inline-block），背景色就能铺满整个容器：

:host {
  background-color: yellow;
  display: block; /* 添加这一行 */
}

完整修正代码 #

JavaScript部分 #

class HookbanContainer extends HTMLElement {
  connectedCallback() {
    const template = document.createElement("template")
    template.innerHTML = /* html */ `
      <style>
        :host {
          background-color: yellow;
          display: block;
        }
      </style>

      <slot></slot>
    `

    const shadowRoot = this.attachShadow({ mode: "open" })
    shadowRoot.appendChild(template.content.cloneNode(true))

    // 改为绑定到组件本身
    this.addEventListener(
      "hookban-test",
      (e) => console.log("test", e)
    )
  }
}

customElements.define("hookban-container", HookbanContainer)

HTML部分 #

<hookban-container>
  <p>hello</p>
</hookban-container>

<button>Trigger Event</button>

<script>
  const triggerEvtButton = document.querySelector("button")
  
  triggerEvtButton.onclick = () => {
    document.dispatchEvent(
      new CustomEvent("hookban-test", {
        bubbles: true,
        composed: true,
        detail: {
          content: "test"
        }
      })
    )
  }
</script>

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