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

@rniwa , the discussion on [#66](https://github.com/WICG/webcomponents/issues/66) is about navigate to a fragment inside a shadow tree. This is not my case. My case is a pure CSS trick that doesn't work inside the Web Component when it should.

For example, by clicking a link, I could change the color of a header:
Before:
![image](https://user-images.githubusercontent.com/5709926/116640112-503e2200-a927-11eb-8081-5d0949842022.png)
After:
![image](https://user-images.githubusercontent.com/5709926/116640139-62b85b80-a927-11eb-8db8-8791cf01f229.png)

Here is the code:
```html
<style>
  #message:target { color: red; }
</style>
 <body>
    <a href="#message">Make the message red</a>
    <h2 id="message">Message in a bottle</h2>
 </body>
```

Another example, I could create a toolbar in which the function selection remains active:
![image](https://user-images.githubusercontent.com/5709926/116640183-88ddfb80-a927-11eb-989a-c1844c4dd83a.png)

However, since `target` isn't part of the root of shadow-root, this feature isn't available. 
This pure CSS trick doesn't work 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#issuecomment-829749156

Received on Friday, 30 April 2021 02:16:56 UTC