Re: [WICG/webcomponents] Target Event Missing in shadow-root. Cannot apply pure CSS on header. (#924)

> 
> 
> It's not a pure CSS trick, you are literally navigating to a fragment and that fragment's corresponding ID cannot be found as its inside a shadow tree.

@annevk , I called it "trick" to make it easy to understand; however, the fact is that the code below works fine outside the Web Component:
```html
<style>
  #message:target {
    color: red;
  }
</style>
<div>
  <a href="#message">Make the message red</a>
  <h2 id="message">Message in a bottle</h2>
</div>
```
However, when moved into a component itself it fails to do so.





 works fine, when move into a Web Component fails because the `target` isn't there.

I understand that Web Components should be encapsulated and outside links shouldn't be allowed to navigate to the fragment; however, the selector `:target` shouldn't be affected. 

This piece of the CSS code, `#message:target` is affected.

So, at least there should be an alternative than having to write extra JS code to obtain the same effect.


-- 
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#issuecomment-830213806