feat: scoped styles

[ayoayco]

Minimal solution for scoped styles: pass a Partial<CSSStyleDeclaration> object to a [style] attribute that our createElement function will spread as style of the created element.

for CSSStyleDeclaration reference: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

[ayoayco]

See this example component with a coupe of style objects. We should be able to rewrite this to use the new [style] we will implement in this issue.

https://github.com/ayoayco/web-component-base/blob/main/site/src/components/feature-set.js

[ayoayco]

Maybe the square brackets are unnecessary

[ayoayco]

Maybe I don’t have to implement this, if something like StyleX already exists? 🙃 https://stylexjs.com/docs/learn/

But I think they need a bundler?

[beatzball]

Maybe I don’t have to implement this, if something like StyleX already exists? 🙃 https://stylexjs.com/docs/learn/

But I think they need a bundler?

On their site:

The recommended way to use StyleX in development and production is with the build-time compiler.

https://stylexjs.com/docs/learn/installation/

[ayoayco]

TIL this is a basic pattern in reactjs: https://www.digitalocean.com/community/tutorials/how-to-style-react-components#step-3-styling-with-style-objects

I now think enabling this using just the style attribute is an expected behavior since we already support a JSX-like templating syntax.