Closed
Description
For the vast number of users who with very good reasons reject CSS-in-JS, we could support something like this:
import Head from 'next/head'
import shadow from 'next-shadow'
export shadow(() => (
<footer>
<div>hi <span>world</span></div>
<style>{`
div span {
/* this won't conflict with any other element anywhere,
including spans from nested components */
color: red
}
`}</style>
</footer>
))In the future, if we find a way of making this work with server-rendering, we could make every single component a custom element with built-in isolation capabilities out of the box, no shadow() wrapping needed. If you want global effects, you can use <Head>, otherwise everything is isolated.
This would put CSS-in-JS and full CSS support on equal ground, both supported, both with pros-and-cons and great performance.
The problems:
- Limited browser support for now
- Is this actually doable?
- Perhaps base it on react-shadow
- What's the server-rendering story of custom elements? Do they require JS execution for the elements registration? Could be slow and impractical
- Are there performance drawbacks?
Metadata
Metadata
Assignees
Labels
No labels