4 ms·

Lit looks really good, I keep trying to find an opportunity to try it out. I feel like web components and the tooling around them has finally got there. Major f

Lit looks really good, I keep trying to find an opportunity to try it out. I feel like web components and the tooling around them has finally got there. Major front end frameworks like React, Vue and Svelt finally also have good support for them. What I really want is a good set of unstyled web components implementing many of the common UI controls that we all end up either building ourselves or finding an implementation of in our framework of choice. Things like drop down menus, select boxes, and tool bars. They could then be used with any of the common front end toolkits.

psygn89 3y ago
Agreed. I get excited to see "headless components" until I read the fine print that it's locked into framework x (usually React). I wish there was a robust headless AND framework-agnostic component library (preferably relying on Lit or Stencil).
- samwillis 3y ago
  Think thing is that Ionic have proven this can work with the massively underrated Ionic Framework (built with Stencil, which they also built). I just wish they expanded a little further into desktop UI components and provided an no/low styled variant - I dislike Material as a base style, it's too opinionated. They are 50% of the way to building a universal mobile+ desktop ui toolkit. Do the same with Ionic Capacitor, make a desktop version, and that would be an incredible improvement over Electron - it uses the OS supplied web view.
- commanderkeen08 3y ago
  Nobody wants Shadow DOM though. Using ::part is always clunky and we’re all lying to ourselves when we say “oh no that’s the feature”. The whole shadcn/tailwind philosophy of having you own your components is the future.
  - jakelazaroff 3y ago
    Wait, but that is the feature. My issue with Shadow DOM is that "base" styles (like fonts and colors applied to tag selectors) don't come through, not that I can't override any given style from outside. I'm not really sure what you mean by "own your own components"?
  - johne20 3y ago
    You don't need to use Shadow DOM though?
sublinear 3y ago
At my workplace we only ever used it once to build a skinnable white label customer support widget for about a dozen of our client's websites. It's a webcomponent that gracefully degrades to es5 + polyfills for IE (this was years ago). Getting the rollup build to work correctly was a bitch and a half, but it turned out nice and it's still in use today.
e111077 3y ago
unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)
claviska 3y ago
Creator of Shoelace [0] here. As someone who’s built multiple design systems and component libraries, I assure you that unstyled (or “headless”) components are often much more time consuming and painful to adopt than those with good default styles. That said, I commonly find that most folks don’t want unstyled components because it’s quite a bit of work to style every single state of every single component. Most people just won’t do it or, if they try, they don’t do it right and they don’t do it completely. What many folks do want are components that have simple, generic styles you can quickly tweak to match your site/app using a skill you already know: CSS. (This is something you can do with Shoelace’s 50+ web components already, but we’re working to make it even easier with additional CSS custom properties.) [0] https://shoelace.style/ https://shoelace.style/
- dleeftink 3y ago
  Thanks so much for your work, the components look great and straightforward to use. Next time I'm building something will definitely try to give Shoelace a spin. Can I ask, are ARIA attributes handled by default?
  - brylie 3y ago
    Perhaps this isn't as specific of an answer as you're looking for, as I'm not too familiar with the Shoelace library, but perhaps we gain some insight from the Shoelace Accessibility Commitment. > My commitment to Shoelace users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason. https://shoelace.style/resources/accessibility/index.html https://shoelace.style/resources/accessibility/index.html
  - claviska 3y ago
    The goal is to handle as much accessibility as possible with smart defaults and by making it easy for users to get right. Currently, all aria stuff is handled internally the components. For example, look at <sl-input> and you’ll see that the input, label, and help text are automatically linked in the shadow root. The minimum the user needs to provide is a label and assistive devices work as expected.
maxkless 3y ago
check out @microsoft/fast-foundation. It’s UI primitive web components and works really well with lit.
dgb23 3y ago
I haven't used Lit yet, but have used lit-html standalone professionally for some projects. (lit-html is a very small, very performant library and the templating solution for Lit). I'm very happy with it. I don't have a use-case for web components (so far) and am happy to just wire up dom events to state changes to lit-html. It requires _very_ minimal plumbing and is very easy to reason about.

psygn89 3y ago

Agreed. I get excited to see "headless components" until I read the fine print that it's locked into framework x (usually React). I wish there was a robust headless AND framework-agnostic component library (preferably relying on Lit or Stencil).

samwillis 3y ago
Think thing is that Ionic have proven this can work with the massively underrated Ionic Framework (built with Stencil, which they also built). I just wish they expanded a little further into desktop UI components and provided an no/low styled variant - I dislike Material as a base style, it's too opinionated. They are 50% of the way to building a universal mobile+ desktop ui toolkit. Do the same with Ionic Capacitor, make a desktop version, and that would be an incredible improvement over Electron - it uses the OS supplied web view.
commanderkeen08 3y ago
Nobody wants Shadow DOM though. Using ::part is always clunky and we’re all lying to ourselves when we say “oh no that’s the feature”. The whole shadcn/tailwind philosophy of having you own your components is the future.
- jakelazaroff 3y ago
  Wait, but that is the feature. My issue with Shadow DOM is that "base" styles (like fonts and colors applied to tag selectors) don't come through, not that I can't override any given style from outside. I'm not really sure what you mean by "own your own components"?
- johne20 3y ago
  You don't need to use Shadow DOM though?

sublinear 3y ago

At my workplace we only ever used it once to build a skinnable white label customer support widget for about a dozen of our client's websites. It's a webcomponent that gracefully degrades to es5 + polyfills for IE (this was years ago). Getting the rollup build to work correctly was a bitch and a half, but it turned out nice and it's still in use today.

e111077 3y ago

unstyled web components: look into ING Lion Web Components (Lit-based) or @generic-components/components (vanilla)

claviska 3y ago

Creator of Shoelace [0] here. As someone who’s built multiple design systems and component libraries, I assure you that unstyled (or “headless”) components are often much more time consuming and painful to adopt than those with good default styles. That said, I commonly find that most folks don’t want unstyled components because it’s quite a bit of work to style every single state of every single component. Most people just won’t do it or, if they try, they don’t do it right and they don’t do it completely. What many folks do want are components that have simple, generic styles you can quickly tweak to match your site/app using a skill you already know: CSS. (This is something you can do with Shoelace’s 50+ web components already, but we’re working to make it even easier with additional CSS custom properties.) [0] https://shoelace.style/ https://shoelace.style/

dleeftink 3y ago
Thanks so much for your work, the components look great and straightforward to use. Next time I'm building something will definitely try to give Shoelace a spin. Can I ask, are ARIA attributes handled by default?
- brylie 3y ago
  Perhaps this isn't as specific of an answer as you're looking for, as I'm not too familiar with the Shoelace library, but perhaps we gain some insight from the Shoelace Accessibility Commitment. > My commitment to Shoelace users is this: Everything I develop will be built with accessibility in mind. I will test and improve every component to the best of my ability and knowledge. I will work around upstream issues, such as browser bugs and limitations, to the best of my ability and within reason. https://shoelace.style/resources/accessibility/index.html https://shoelace.style/resources/accessibility/index.html
- claviska 3y ago
  The goal is to handle as much accessibility as possible with smart defaults and by making it easy for users to get right. Currently, all aria stuff is handled internally the components. For example, look at <sl-input> and you’ll see that the input, label, and help text are automatically linked in the shadow root. The minimum the user needs to provide is a label and assistive devices work as expected.

maxkless 3y ago

check out @microsoft/fast-foundation. It’s UI primitive web components and works really well with lit.

dgb23 3y ago

I haven't used Lit yet, but have used lit-html standalone professionally for some projects. (lit-html is a very small, very performant library and the templating solution for Lit). I'm very happy with it. I don't have a use-case for web components (so far) and am happy to just wire up dom events to state changes to lit-html. It requires _very_ minimal plumbing and is very easy to reason about.