Webcomponents：host：hover

Question

有没有办法在webcompoenents上添加css：hover效果（不是来自父级）。

我有以下示例代码

window.customElements.define('a-b', class extends HTMLElement {
  constructor() {
      super();
      this.attachShadow({mode: 'open'}).innerHTML = `
        <style>
          :host {
            display: block;
            height: 100px;
            width: 100px;
            background: red;
          }
          :host:hover {
            background: blue;
          }
          :host::selection {
            background: rgba(0, 0, 0, 0.15);
          }
        </style>
        <slot></slot>
      `;
  }
}

:host::selection属性可以正常工作。但是:host:hover似乎没有任何作用。

我知道有解决此问题的方法，例如：

• 将所有内容包装在div
中
• 在父样式表上应用:hover效果

但是我想知道是否只是为了简化代码而遗漏了一些东西（因为这似乎不太复杂）。

Answer 1

为使代码更简洁，请改用:host()语法，因为:hover是应用于自定义元素的伪类。然后可以选择：

:host(:hover) { ... }

示例：

window.customElements.define('a-b', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
        .innerHTML = `
           <style>
              :host(:hover) {
                color: white;
                background-color: blue;
              }							
          </style>
          <slot></slot>`
  }
})

<a-b>Hello World</a-b>