[WICG/webcomponents] Chrome doesn't repaint with :last-of-type AND shadowRoot AND :host(:active) (Issue #985)

Reporting it here and not with the Chromium team, because it seems ``:host(:active)`` is the culprit

In this code 

```javascript
<style>     
  #LIST div:last-of-type { 
    background:green;
  }
</style>
<div id="LIST"></div>
<script>
  LIST.attachShadow({mode: 'open'})
      .innerHTML = `<style>:host(:active) button { background:red }</style><slot></slot><button>ADD</button>`;
  LIST.onclick = () => LIST.appendChild(document.createElement('div')).innerHTML = `DIV`;
</script>
```

Chrome doesn't update the ``last-of-type`` CSS when clicking the ADD button

![](https://i.imgur.com/Vk3L0X5.png)

Behavior in FireFox is different (and correct I would say):

![](https://i.imgur.com/dJG9GSS.png)

Better test code at: https://jsfiddle.net/WebComponents/Lkah15wy/

* It must be a combination of ``last-of-type`` AND shadowRoot AND ``:host(:active) button``, because: if I take out any of these (like replacing ``last-of-type`` with ``last-child``) everything is fine
* **adding** a CSS selector ``div:last-child{ color:gold }`` solves the issue
* replacing ``:host(:active) button`` with ``button:active`` solves the issue 



-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/985
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/985@github.com>