Open
Description
Example
Let's assume you have this Web Component:
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.