Use the "scoped" attribute for CSS and JS

[collimarco]

I was reading the docs and this page in particular...

https://viewcomponent.org/guide/javascript_and_css.html

I really love where ViewComponents is going! Same benefits as React, but much simpler and clean (like Rails).

However I don't like the custom elements syntax... Mixing the CSS with Javascript and a markup duplication between the JS file and the HTML file.

Why not just use the scoped attribute for CSS? Much simpler and clean! Maybe it can be added as an alternative to the docs.

For Javascript there isn't a scoped attribute yet, however it would be really cool to have it, as already proposed here:

https://discourse.wicg.io/t/script-tags-scoped-to-shadow-root-script-scoped-src/4726

It seems that there is also a polyfill that we could use right now.

[jaredcwhite]

AFAIK CSS doesn't have a modern supported scoped attribute. It was briefly a thing at one time and subsequently removed.

Styles encapsulated within the Shadow DOM is the web-native official method of scoping CSS. While in the docs example the scoped CSS in contained within a JS file as is common in a lot of web components written out in the wild, there are methods you can use to write a separate CSS file which is then loaded in by the component. The best method IMHO is just starting to roll out called "Constructible Stylesheets". I'm not 100% certain but I believe there's a polyfill available for that. More info: https://github.com/WICG/construct-stylesheets

[collimarco]

@scope looks very promising for CSS: https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

[reeganviljoen]

@collimarco even though it has arrived what is its support like a cross all browsers