Shoelace: A library of web components
shoelace.style
shoelace.style
[0]: https://blog.fontawesome.com/shoelace-joins-font-awesome/
I.e. it's proof that Shoelace, in this case, is not inherently useless. But it's hard to get a hunch for how good it is to a mere non-corporate.
Gotta give props though, the apps site is fast and slick.
Specifically, Shoelace uses Shadow DOM and adoptedStyleSheets.
For Shadow DOM, there’s Declarative Shadow DOM, a way of serialising a Shadow DOM, which is extra work to support, but possible; it’s currently supported in Chromium and Safari, and last month Firefox landed an experimental implementation.
But the key feature and problem of Shadow DOM (in my opinion, more problem than feature) is how it isolates styles. You need to add the stylesheet to every shadow root, via a <style> or <link rel=stylesheet> element (and hope the browser is clever enough to deduplicate, which it should be in the latter case but I don’t think it will be in the former), or via adoptedStyleSheets, which is generally more efficient and allows shared mutation after construction (unlike the other approaches). Shoelace uses adoptedStyleSheets. Trouble is, that doesn’t work with Declarative Shadow DOM.
i'm sure if you webpack the crap out of it bundling hundreds of dependencies into the same parse, it'll perform poorly, but well, stop doing that.
You basically write all the normal HTML and CSS so it's loaded in right away. But then you also make use of the advantages that defining a custom element gives you.
I've started moving to this technique from my earlier technique of putting a data-module on wrapping div components, where I manually had to deal with a bunch of stuff which HTML Web Components just do for you for free. Super handy!
Querying elements also becomes more complex.
You tackle it by doing two things:
1) use a bundler (rollup or webpack) if your code is big so it can be chunked and loaded quickly
2) have a loading spinner by default
Some developers have a dogmatic zeal against loading spinners, but users are very accustomed to them.
In fact, it's possible for websites to load _too_ fast, seeming unnatural to users (who at this point in time are very much expecting the flow to be request->spinner->load).
Maybe it's for consistency (styling/behaviour). Either way, it looks really well done.
https://open-ui.org/ will finally help with this, but it's a very slow process.
Like datatables, rich-text editing, toolbars,...
MOST applications are just simpler CRUD UIs. Developing these is still too complex on the web platform.
And Progressive Enhancement has it that our bells and whistles gracefully degrade back to from whence they came.
But browsers don't do that either. And you really, really don't want to make your own controls most of the time. Because: https://drewdevault.com/2021/06/27/You-cant-capture-the-nuan...
Personally, I wish that for accessibility and other reasons, all 10000 frameworks would produce buttons with some kind of metadata that lets a user configure their own settings. But we're quite far off that.
It's a combo of (a) HTML lacks the features/ergonomics and (b) need to provide a clean-syntax API that extends HTML.
They're built with Lit too :)
I would really like to use it, but using it feels like limiting your options much more than necessary. Even the CSS-in-JS based libraries (like React MUI) allow SSR to some extent.
Also the developer now works at Microsoft and they are using it so at least it has a major backer.
Good option for those who prefer vanilla web components.
Only hangup I ran into was the event/callback based API for some components - promises would have been more convenient.
Bootstrap basically takes standard elements and when you add CSS classes and data properties, it styles them and adds some JS behaviours.
Shoelace builds HTML custom elements, using CSS variables for controlling the style, with the JS baked into the custom-element code. And Shoelace uses the shadow DOM, so any customisations do not "leak" outside of your components (although this has its own implications).
Custom elements basically do the same as React/Vue/whatever (reactive properties, slots etc) but in a manner that's built into the HTML spec and into all browsers. (React/Vue et al also have mechanisms for building your components as custom-elements, but you're then adding the dependency on React/Vue when you reuse them - although Shoelace has a dependency on lit.dev, as the actual custom-elements spec is quite low-level).
But Bootstrap and Shoelace are essentially solving the same problem - a reusable design system - but Shoelace does it in a way that's already built in to browsers and arguably cleaner to use.
Bootstrap got kind of stuck in the past. Vanilla Bootstrap is only really usable without a modern frontend framework, as it comes with many Javascript snippets that make the controls interactive. But it's just not really compatible with other UI libraries like React, Vue, etc.
Also Bootstraps feels quite antiquated from a user perspective. And for theming bootstrap you need to go through Sass hell.
I still use it for server side generated HTML, because it's really easy to use and just works.
The only one I liked so far was shadcn, which is more like a code generator for creating Tailwind based React components.
Just hover over that middle divider between the input>|<output panels to get a feeling of how customizable it is.
Also our menus do not follow their keyboard navigation logic at all and adds support for disabled, hidden, inert elements, as well as selection by typing the first letter of menu items.
All of these are possible because the author knows what NOT to do with HTML custom elements.
I'm on Firefox and scrolling your site is really slow and also fans is spinning up (I've plenty of RAM and CPU power).
Something on your page is degrading performance (for me).
The web has a pretty different set of expectations, one of the reasons for its success.
Take a look at the defaults for browserslist, for example:
https://browsersl.ist/#q=defaults
It just barely supports Safari 15, on iOS only, and that’s likely to go away imminently because it’s under 1% usage.
Browserslist is used by a huge proportion of web developers and the tools that they use, with millions of downloads a week. It has nothing to do with native apps and everything to do with the web.
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?
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
Unless you have fussy designers or PMs who insist on artisanal NIH components for everything just because.
I want an opinionated component system which do not look like the others.
If we had gone down the path of smart documents instead of web apps for the internet, we would have had a better time for sure.