# 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