TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Shoelace: A Web Component Kit

117 点作者 pyentropy大约 3 年前

15 条评论

jjcm大约 3 年前
As someone that&#x27;s done a lot of webcomponent work, this actually looks really solid compared to a lot of other libraries out there. These docs look great too.<p>All issues I can see are fairly minor. I&#x27;d like to see inputs use the native formAssociated api rather than just relying on hijacking FormData (though using the FormData hijack as a fallback). Component scoped design tokens should be part of the `:host{}` style for that component, not in the global scope. Semantic tokens would also be a better approach for improved themability. The localization is hacky, but I&#x27;ll give the authors major props for actually pushing a suggestion to the spec[1] to allow for better handling in native components.<p>Some other minor things I&#x27;d like to see is performance comparisons with similar React&#x2F;Vue&#x2F;Svelte components as well. Webcomponents can fall into poor performance when there are many occurances that overuse observedAttributes.<p>All in all though, this library looks really great.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;whatwg&#x2F;html&#x2F;issues&#x2F;7039" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;whatwg&#x2F;html&#x2F;issues&#x2F;7039</a>
escanda大约 3 年前
Have you seen OpenUI5 by SAP? -&gt; <a href="https:&#x2F;&#x2F;github.com&#x2F;SAP&#x2F;ui5-webcomponents" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;SAP&#x2F;ui5-webcomponents</a><p>Look neat. They even have Typescript type definitions to it.<p>I did a simpile test with ScalablyTyped in order to import those into ScalaJS to no avail but there might be a fix.
评论 #30905127 未加载
评论 #30921733 未加载
claytongulick大约 3 年前
I&#x27;ve used shoelace components, overall I&#x27;ve been happy with them.<p>The only parts I don&#x27;t like are the event based APIs.<p>It&#x27;s 2022, I feel like we&#x27;ve settled on promises as the best way to handle async.<p>The author wasn&#x27;t particularly receptive to the issue I raised around it, even offering to create a PR.<p>I think event based APIs are really holding what would otherwise be a very nice component set back.
评论 #30903349 未加载
评论 #30901572 未加载
评论 #30903316 未加载
评论 #30901996 未加载
easrng大约 3 年前
I miss Shoelace being a CSS library :(<p>Web components are nice and all but they need JS and I want my sites to work without JS.
systemvoltage大约 3 年前
As someone who doesn&#x27;t have a clue about frontend components, but have the desire to build them, how does this compare to <a href="https:&#x2F;&#x2F;lit.dev&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lit.dev&#x2F;</a> ?
评论 #30902487 未加载
评论 #30902884 未加载
评论 #30903961 未加载
chrismorgan大约 3 年前
Relevant previous discussion from when 2.0 was released a couple of years ago, changing Shoelace from a CSS library to a JavaScript&#x2F;Web Components&#x2F;Shadow DOM library: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23866894" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=23866894</a>.<p>My top-level comment thread there is particularly still relevant and applicable; the mandatory use of Shadow DOM means client-side JavaScript execution is required and server-side rendering impossible, which I don’t think is good for most web stuff.
评论 #30903891 未加载
dmitriid大约 3 年前
The complete and utter failure of the web as a platform is evidenced by the umpteenth framework offering the same set of the most basic components: avatars, badges, radio buttons, selects.<p>Kudos to Shoelace for including a draggable splitter which is usually missing from other libs.<p>The web is stuck in the perpetual &quot;reinvent the concept of circle&quot; stage without even moving onto &quot;reinvent the wheel&quot; stage. This &quot;great and new&quot; lib is literally indistinguishable from, say, jQuery UI from almost 20 years ago.
评论 #30915872 未加载
评论 #30904030 未加载
hardwaresofton大约 3 年前
Shoelace looks awesome, and I think it&#x27;s libs like these that are the future. People get hung up on the apparent confusion and circular movement of the frontend community but if you look closer you can see the incremental improvement.<p>Native web components are the endgame for flourishing frontend ecosystem (that many see as mostly waste, and sometimes they&#x27;re not wrong) -- in the future you&#x27;ll be to build whole sites writing HTML like:<p><pre><code> &lt;script src=&quot;&#x2F;path&#x2F;to&#x2F;some&#x2F;custom-component&quot;&#x2F;&gt; ... &lt;custom-component&gt; ... &lt;&#x2F;custom-component&gt; </code></pre> That&#x27;s the future Shoelace is helping bring about and I think it&#x27;s a really nice minimally, and paradoxically simple way to build webpages that have the functionality you want without the hassle of heavier frameworks, if you&#x27;re lucky to find just the right component to spice up your page.<p>I will say that it&#x27;s hard to execute cleanly on this vision and it looks like Shoelace is doing a pretty good job -- I made a small contribution to this space[0], and I have to say that getting started with my project is much less clean (as far as dogfooding goes it was functional but didn&#x27;t taste great!).<p>Looking forward to trying out Shoelace in the future.<p>One thing I really want to see tackled though (by a standards body) is the data management story. Maybe it&#x27;s best left to practitioners and library authors but I think something like services-as-DOM-elements[1] (disclaimer: I thought this up) could work. Then we get a world where we can drop pre-made display elements <i>and</i> pre-made data stores onto pages.<p>Also heavy mention to tailwind -- the class soup bit is annoying but it&#x27;s sparked an absolute explosion of reusable templates which I think are helping people build better looking sites faster than ever before. Just like with Bootstrap, of course, we&#x27;re all getting tired of seeing really similar design elements but the acceleration is probably a net good, even if it requires abusing CSS a little bit.<p>[0]: <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;mrman&#x2F;landing-gear" rel="nofollow">https:&#x2F;&#x2F;gitlab.com&#x2F;mrman&#x2F;landing-gear</a><p>[1]: <a href="https:&#x2F;&#x2F;mrman.gitlab.io&#x2F;services-as-dom-elements" rel="nofollow">https:&#x2F;&#x2F;mrman.gitlab.io&#x2F;services-as-dom-elements</a>
评论 #30904568 未加载
jeroenhd大约 3 年前
Not only is this a web page with its own loading screen, it&#x27;s a web page with a loading screen that shows every time you open the page or click a link on the website.<p>My browser has a loading bar and your web page is not a video game pulling in hundreds of megs of assets in the background. What could possibly justify this kind of behaviour for a UI toolkit?
评论 #30903016 未加载
fareesh大约 3 年前
Are web components SEO friendly?<p>If my page has an accordion or tab component will Google be able to crawl the text inside it?
评论 #30903974 未加载
评论 #30904035 未加载
评论 #30905219 未加载
rado大约 3 年前
Great presentation. Splitting the code into light and dark theme is bizarre and adds unnecessary complexity in &lt;head&gt;.
cube00大约 3 年前
Given it&#x27;s built on Google&#x27;s Lit, hopefully they don&#x27;t pull the rug out from under them.
评论 #30905184 未加载
aemtox大约 3 年前
I have to dive deeper into this, it looks very interesting.
ilaksh大约 3 年前
Why do I need a web component for a button?<p>Also, if I have web components, why do I need React?
评论 #30902244 未加载
评论 #30903327 未加载
0des大约 3 年前
I&#x27;m seeing a loading screen, then a loading bar. Not the best foot to start off on if this is a new frontend kit you&#x27;re doing.
评论 #30902132 未加载