11 ms·
Shoelace: A library of web components
- xk_id 3y agoOn my phone, the whole page is covered by the left side menu. Tapping on the burger doesn’t hide the menu either. Not a good impression from a web design library.
- christophilus 3y agoWhat phone are you using? It seems fine on my old iPhone mini.
- xk_id 3y agoIphone 6S running 14.3.
- perryg 3y agoThat’s before Safari added better web component support. I would expect many sites and apps to not work at this point.
- wwweston 3y ago14.3 seems more like "try to degrade gracefully" old rather than "won't support" old...
- xk_id 3y agoWhatever it requires to hide the menu, that a 3 years old browser doesn’t have, can’t possibly be essential for just a documentation page.
- taf2 3y agoIt’s an 8 year old phone … iPhone 6s was released September 2015…
- xk_id 3y agoThe issue here is the version of the webkit engine, which ships with iOS and that is 3 years old. Anyway a docs page is basic, it should be compatible regardless.
- mixmastamyk 3y agoWorks for me, 15.7.9, so updatable.
- JimDabell 3y agoIt’s extremely common to support the two most recent major versions, especially for iOS. It’s great if things work on iOS 14, but it’s been explicitly out of support for over a year in a vast number of organisations.
- wwweston 3y agoThat's the well-established expectation for iOS. The web has a pretty different set of expectations, one of the reasons for its success.
- JimDabell 3y agoNot these days, where most people are using evergreen browsers and iOS users upgrade very quickly. Take a look at the defaults for browserslist, for example: https://browsersl.ist/#q=defaults 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.
- eviks 3y agoHilarious how the basics keep getting broken despite the huge amount of collective effort to reinvent the basics
- chrismorgan 3y agoDespite? Because of.
- threeseed 3y agoI've used these in the past and they are really well done. Also the developer now works at Microsoft and they are using it so at least it has a major backer.
- konnorrogers 3y agoCory (the creator) actually works at FontAwesome now. FontAwesome purchased the library ~1yr ago and hired Cory to work on the library full time as well. https://blog.fontawesome.com/shoelace-joins-font-awesome/ https://blog.fontawesome.com/shoelace-joins-font-awesome/
- sureglymop 3y agoThese look and feel great! Will give it a try.
- claytongulick 3y agoI've used this, works great. 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.
- spinningslate 3y agothis looks great. I'm puzzled by something though: why does it duplicate components that already exist in standard HTML5 (Button, Checkbox, Dropdown etc.)? The whole idea of web components is being able to augment what's already built in, not have to replace it. Maybe it's for consistency (styling/behaviour). Either way, it looks really well done.
- threatofrain 3y agoTheming is at least one reason.
- troupo 3y agoBecause browsers offer very little styling and customization options even for the handful of built-in elements. That's why every library under the sun tries to re-invent them again, and again, and again. https://open-ui.org/ https://open-ui.org/ will finally help with this, but it's a very slow process.
- lxe 3y agoThe only reason we have 10,000 UI libraries in the last 20 years is because we decided to keep default browser UI ugly and bare-bones for some reason.
- breadwinner 3y agoThat's a good thing in my opinion. Don't give me a set of 25 controls, instead make it easy to make my own. Because no matter what you include in default controls, I am going to need 12 more.
- peebeebee 3y agoBut the default set has been lacking for too long now too. Webbrowsers should really get together and make a new default set of Application-based UI controls, and make them a bit more beautiful by default. :) Like datatables, rich-text editing, toolbars,... MOST applications are just simpler CRUD UIs. Developing these is still too complex on the web platform.
- lxe 3y agoFinally a component library with trees and resizable panes!
- xydac 3y agohave been following the development of this very closely for this library, and love the fact that we can script load individual web component in html as bare bones.
- Valord 3y agoCan you please elaborate on what this means ?
- megaman821 3y agoAdd the script tag to your page for any of the components and you can use them. No building, compiling or initializing anything.
- xydac 3y agoexactly, and pair that with css variables for customizations if needed for ad-hoc projects/prototypes or full products
- spankalee 3y agoI love this component set. The maintainer, Cory, cares a ton about accessibility and quality and it shows. They're built with Lit too :)
- corny 3y agoI'm not happy with any of the solutions to prevent a flash of undefined components. Has anyone given up on web components for that reason? Or is there a best practice for this?
- Onavo 3y agoDo webcomponents not have build time pre-rendering or SSR?
- toddmorey 3y agoCertainly can just depends on the framework used. I know 11ty can server render them. Astro.build supports lit as well.
- deleted 3y ago[deleted]
- corny 3y agoNo, I believe it is the nature of web components that they can't be server rendered. I'm not talking about framework components like react, vue, etc.
- chrismorgan 3y agoWeb Components in general: sure. But what Shoelace uses: no. 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.
- 3y ago
- andix 3y agoI didn't like that the components are all web components with their own shadow Dom inside. Makes styling really hard and didn't work with tailwind for example.
- Bytewave81 3y agoNot just that, but it basically makes the library incompatible with serverside rendering a la Next.js. We actually explored using Shoelace for a project but ended up having to choose something else instead because of this.
- neeleshs 3y agoWhat did you end up using?
- Bytewave81 3y agoWe settled on Chakra (https://chakra-ui.com/ https://chakra-ui.com/). Although we also abandoned our ambitions of a Next.js migration, so... I guess it didn't really end up mattering all that much anyway.
- neeleshs 3y agoThank you
- andix 3y agoTrue, it completely relies on client side rendering, and it's impossible to render it server side. With disabled Javascript it doesn't show anything at all. 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.
- mondrian 3y agoI guess the advantage is that you can drop them into any HTML page and they look and work correctly. And you can control them with plain JS, like `document.getElementByID(dialogId).open = false;`
- deleted 3y ago[deleted]
- ComputerGuru 3y agoJust missing a (multi) file upload widget in general and an image upload one in specific.
- ilrwbwrkhv 3y agoThese all look the same. Are there any designers out there who do not follow the "current thing" and can actually think for themselves? I want an opinionated component system which do not look like the others.
- mondrian 3y agoFor what it’s worth all the components expose CSS parts that let you customize each component in detail.
- Inviz 3y agoI don't see that these components use part/exportparts feature to do that. Am I looking at it the wrong way? Or do you mean that customization happens via CSS?
- mondrian 3y agoYeah, sorry, it's using CSS parts for customization. So if a component is made up of multiple nested containers, you can target the inner containers with ::part(name).
- deleted 3y ago[deleted]
- tptacek 3y agoSerious question: if you're building an application, why do you want this? It used to be a huge thing to build Apple, Windows, Motif, whatever apps closely in accordance with their interface guidelines and idioms, but for some reason on the web everyone seems to need an idiosyncratic, opinionated set of basic controls.
- imjonse 3y agoI agree with you and I am sure I am not saying anything new, but the fact that on the web content, presentation and marketing sites heavily outnumber webapps, and that one needed to stand out - even if superficially - from countless other options, caused a much larger emphasis being put on customizability, looks and originality which didn't stop at layouts colors and typography, but seeped into interactions. So a lot of jobs got created, lots of users suffered from slow, confusing and buggy UI/UX but at least lots of originality and prettiness was had :)
- Inviz 3y agoI'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
- pixel_tracing 3y agoNo data tables in library? Other than that nice work!
- judah 3y agoWe at Microsft used this to build apps.microsoft.com. We're quite happy with the results. Shoelace is customizable, accessible, extensible, easy to use.
- mp05 3y agoNice, that sounds like a good product! I will have a look. Thanks.
- bung 3y agoYou at Microsoft don't use Microsoft's fast.design?
- pjmlp 3y agoThey at Microsoft don't use many of the stuff that we are supposed to use, e.g. see MAUI.
- judah 3y agoAlso note, Shoelace was built by a Microsoft engineer, Cory LaViska. He left to work on Shoelace full-time[0] after it was acquired by FontAwesome. [0]: https://blog.fontawesome.com/shoelace-joins-font-awesome/ https://blog.fontawesome.com/shoelace-joins-font-awesome/
- judah 3y agoWe considered it, but Fast was missing some key components when we started building our web app.
- actionfromafar 3y agoThis is nice and all, but when I see what the big companies do, I always have this cave-at in my head - "is this one of the teams with enough resources to boil the ocean?" 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.
- bergenbergen 3y agothis seems like a great library, but it is missing a date picker. it’s hard to find UI libraries willing to take on the date picker, i guess because native pickers, esp on mobile, get the job done?
- danjac 3y agoBrowser native date pickers are usually good enough and meet accessibility requirements these days. Unless you have fussy designers or PMs who insist on artisanal NIH components for everything just because.
- cetinsert 3y agohttps://RTCode.io https://RTCode.io is built on Shoelace 2 today. 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.
- uxcolumbo 3y agoQuick feedback. 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).
- tamarlikesdata 3y agoI'm impressed with the breadth of Shoelace's offerings, particularly its emphasis on accessibility and framework compatibility. For a project I'm working on, which involves creating an interactive e-learning platform, components like adaptable quizzes and responsive drag-and-drop interfaces are crucial. Could Shoelace be extended to include such interactive elements, maintaining its accessibility standards?
- JodieBenitez 3y agoI've been using this in conjunction with Unpoly. Very refreshing to develop with no build step and good old server-side templates.
- yolo3000 3y agoHaven't done frontend in a long time, but how is this different than something like Bootstrap? Is it the fact that it comes also as a React & co library and you can customize properties of a 'component' easier than building your own wrapper 'component' to modify properties which are set via 'data' or 'css' attributes? I guess this leads me to the next question, I saw in a recent project on my company's Github how everything was done with 'React-Bootstap', which to me looked very weird, that in every Jsx component there was barely any HTML tags, but only smaller components from this bootstap-react library, even for simple things like <h1>s. It all looked like a mess to me, but maybe my views are from older times.
- phist_mcgee 3y agohttps://developer.mozilla.org/en-US/docs/Web/API/Web_components https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
- rahoulb 3y agoLike bootstrap it's a set of standard behaviours and styles. 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.
- andix 3y agoIt's like Bootstrap, but different. Main difference: it's based on Web Components and Javascript, Shoelace won't render anything without Javascript, without the possibility of Server Side Rendering (Shadow DOM requires Javascript) 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.
- replwoacause 3y agoI like Tailwind, so I’ve been using Preline and been happy with it. https://preline.co/docs/index.html https://preline.co/docs/index.html
- andix 3y agoI didn't try it out, but usually I'm unhappy with Tailwind based libraries. It just doesn't really fit the concept of Tailwind to use it for a UX library. On one hand those libraries are just a handbook of HTML snippets to copy&paste. On the other hand many of them need some support library, that does some magic in the background that's hard to understand. The only one I liked so far was shadcn, which is more like a code generator for creating Tailwind based React components.
- angra_mainyu 3y agoOh wow, I love this. Incredible work!