<story><title>Shoelace 2.0 release: UI toolkit that works with all frameworks or none at all</title><url>https://shoelace.style/</url></story><parent_chain></parent_chain><comment><author>claviska</author><text>Shoelace author here.&lt;p&gt;A couple days ago, I released Shoelace 2.0, an open source library of common UI components.&lt;p&gt;These components work with any framework, can be loaded via CDN, are fully customizable with CSS (no preprocessor required), and install easily with a simple script + stylesheet. They were built with Stencil.js, which is a fantastic tool. The end result compiles down to vanilla web components.&lt;p&gt;Each component was designed from scratch to be lean, customizable, and easy to use. Accessibility is a common question folks have about component libraries. I’m definitely not an expert here, but I&amp;#x27;ve spent a lot of time trying to get it right. I would like to echo the experts and say that accessibility only starts with components, but hopefully having a good foundation to build on will encourage others to think about it more at higher levels.&lt;p&gt;I hope you&amp;#x27;ll take a second to check it out! I&amp;#x27;m happy to answer any questions you have about the project, how it&amp;#x27;s built, etc.</text></comment>
<story><title>Shoelace 2.0 release: UI toolkit that works with all frameworks or none at all</title><url>https://shoelace.style/</url></story><parent_chain></parent_chain><comment><author>chrismorgan</author><text>My biggest concern with using Shadow DOM for things like this is that it makes it depend upon JavaScript, which I strongly prefer not to do.¹ I know there’s some research work into declarative Shadow DOM², which has the potential to resolve this, but that’s still quite some way off. As it stands, I don’t feel comfortable using Web Components with Shadow DOM for things like this, which is a pity, because it’s a &lt;i&gt;delightful&lt;/i&gt; way to work, and this toolkit looks very good in most regards. Instead, I like Svelte’s model which essentially allows you to &lt;i&gt;write&lt;/i&gt; things this way, but have it result in light DOM, so that you can still do server-side rendering if you desire.&lt;p&gt;¹ Requiring JavaScript harms accessibility, especially for web &lt;i&gt;pages&lt;/i&gt; (as distinct from web &lt;i&gt;apps&lt;/i&gt;). It makes pages take longer to load, not be as spider-friendly, and be more fragile when JavaScript fails to load, whether deliberately or accidentally—and simple network failures and the likes break things more often than you might imagine. I myself browse the web with JavaScript disabled via uMatrix, mostly because it speeds the web up a lot on average. Privacy improvements are a distant secondary reason. When I encounter pages that require JavaScript, I either give up on them or open them in a Private Browsing window, where I don’t have the uMatrix extension enabled; or if it’s something I expect I may be using more than once or twice, I see about more precise whitelisting in uMatrix.&lt;p&gt;² &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;whatwg&amp;#x2F;dom&amp;#x2F;issues&amp;#x2F;831&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;whatwg&amp;#x2F;dom&amp;#x2F;issues&amp;#x2F;831&lt;/a&gt;</text></comment>