[WICG/webcomponents] `:target` failing inside web components. (#924)

# Example

Let's assume you have this Web Component:

```javascript
let template = `
 <div>
  <a href="#message">Make the message red</a>
  <h2 id="message">Message in a bottle</h2>
 </div>
 <style>
  #message:target {
   color: red;
  }
 </style>
`;

customElements.define('my-component', class myElement extends HTMLElement {
 constructor() {
  super();
  let shadowRoot = this.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = template;
 }
});
```

# Problem
This code will fail because the event `:target` is missing in the root of the shadow.

Also, since it isn't in the specifications, there are not signs that other browsers will fix this issue.

# Expectations

I was expecting to see the header turn to red when clicking on the link. 
This works outside the web component but fails to do so inside the web component.

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

Received on Thursday, 29 April 2021 19:46:37 UTC