Re: [WICG/webcomponents] [Shadow]: url fragment identifiers should be followed into ShadowDOM (bugzilla: 23161) (#66)

I would like to add that using `:target` has other applications other than just following identifiers.
There are pure CSS effects that can be use with it. 

For example, normally I could change the color of a header when clicking on a link using pure CSS:

CSS:
```css
#message:target {
 color: red;
}
```
HTML:
```html
<a href="#message">Make the message red</a>
<h2 id="message">Message in a bottle</h2> 
```
Before:
![image](https://user-images.githubusercontent.com/5709926/116621392-55d44180-a900-11eb-8e9d-b752649971a3.png)
After:
![image](https://user-images.githubusercontent.com/5709926/116621434-61276d00-a900-11eb-9ed8-acc86cb82b2c.png)


By using pure CSS, we can keep a button highlighted in a toolbox, until we press another button:
![image](https://user-images.githubusercontent.com/5709926/116620889-ab5c1e80-a8ff-11eb-89f6-3e35bdd47ce6.png)

by just doing:

CSS:
```css
#toolbar .item-switch:target {
  background: white;
  color: black;
}
```

HTML:
```html
  <a href="#btn-pencil">
    <span id="btn-pencil" class="item item-switch"><i class="fas fa-pencil-alt" alt="Pencil"></i></span>
  </a>
```
All this without having to write even one line of JavaScript yet.

However, by not allowing `:target` into the Web Component, this feature has being nullified. 
Plus, I had to spend hours until I found that the root cause of the problem was that event target wasn't in the shadow-root.

So, the code below will not work:

```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>
`;
class MyElement extends HTMLElement {
 constructor() {
  super();
  let shadowRoot = this.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = template;
 }
}
customElements.define('my-component', MyElement);
```



-- 
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/66#issuecomment-829613433