3 ms·
I'm looking for a library of web components that: 1) Uses slots for composition 2) Does not use CSS-in-JS 3) Lightweight I understand that slots imply shado
by Inviz 3y ago
I'm looking for a library of web components that:
1) Uses slots for composition
2) Does not use CSS-in-JS
3) Lightweight
I understand that slots imply shadow Dom, and then shadow Dom usually means adding/adopting stylesheets into components, and that means css in js.
But there's also ::part that allows piercing the shadow dom. Is there any library that uses it?
- mattlondon 3y agoThe CSS doesn't need to be in the JS. You can trivially just fetch the static CSS file in JS then have the content adopted.
- Inviz 3y agoYeah but flash of unstyled content? Plus you need to somehow adopt only related parts? Selectors wouldnt match easily necessarily, e.g. decision to adopt :hover selector must be made somehow
- nona 3y agoI think this library does what you want: https://shoelace.style/getting-started/customizing#css-parts https://shoelace.style/getting-started/customizing#css-parts
- Inviz 3y agoI guess it’s most-but-not-all part that got me confused. The are parts re-exported Manually? I guess that works
- dannye 3y agohttps://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/ https://webcomponents.dev/blog/all-the-ways-to-make-a-web-co... Yet, they are all Tools, and you don't learn a Technology by learning a Tool, or do you become a Writer when you learn Word? ``::part`` is part [sic] of the Standard, it doesn't require any tooling. CCS in JS is your choice https://jsfiddle.net/WebComponents/znbgf726/ https://jsfiddle.net/WebComponents/znbgf726/ https://i.imgur.com/inJAbQW.png https://i.imgur.com/inJAbQW.png