[csswg-drafts] [css-scoping] Please bring back scoped styles (#3547)

o-t-w has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scoping] Please bring back scoped styles ==
The scoped style tag HTML attribute works really well with popular frameworks and is far simpler to use than shadow DOM.

e.g. in React: 
```
import React from 'react';

const Profilecard = (props) => {
 
 const styles = `
 div {background-color: ${props.bgColor}}
 h2 { color: white; }
 img  { 
  border-radius: 50%;
  height: 80px;
  width: 80px;
 }`

 return (
  <div className="card">
   <style scoped>{styles}</style>
    <h2>{props.name}</h2>
    <img src="man3.jpg" alt=""/>
   </div>
 );
};

export default Profilecard;
```
Shadow DOM offer more encapsulation than scoped styles, but this level of encapsulation is not often needed, and even sometimes complained about by developers.

e.g. [Chris Coyier](https://css-tricks.com/regarding-css-global-scope/): 

> Personally, I wish it was possible to make the shadow DOM one-way permeable: styles can leak in, but styles defined inside can't leak out.

It is important to note that both Vue js and Svelte have replicated this API - it is clearly an API that is both easy to work with and gives the _right level_ of encapsulation (unlike shadow DOM, which is useful for more niche cases).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3547 using your GitHub account

Received on Tuesday, 22 January 2019 21:44:29 UTC