title: Webcomponents :host:hover
body: <p>Is there a way to add a css :hover effect on webcompoenents (not from the parent).</p>
  
  <p>I have following example code</p>
  
  <pre><code>window.customElements.define('a-b', class extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'}).innerHTML = `
          &lt;style&gt;
            :host {
              display: block;
              height: 100px;
              width: 100px;
              background: red;
            }
            :host:hover {
              background: blue;
            }
            :host::selection {
              background: rgba(0, 0, 0, 0.15);
            }
          &lt;/style&gt;
          &lt;slot&gt;&lt;/slot&gt;
        `;
    }
  }
  </code></pre>
  
  <p>The <code>:host::selection</code> property works as expected. But the <code>:host:hover</code> does not seem to have any effect.</p>
  
  <p>I know there are workarounds to this problem like:</p>
  
  <ul>
  <li>wrapping everything inside a <code>div</code></li>
  <li>applying the <code>:hover</code> effect at the parent stylesheet</li>
  </ul>
  
  <p>But I wanted to know if I am just missing something (since this does not seem too complex) for the sake of cleaner code.</p>