TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

The Failed Promise of Web Components

367 pointsby lemonberryover 4 years ago

30 comments

brundolfover 4 years ago
This post is needlessly snarky, but I don&#x27;t disagree with the basic premise.<p>Here&#x27;s what killed web components: lack of native databinding on the web. That&#x27;s the reason the standard is useless without JS. Any modular, dynamic, modern UI requires databinding, which means it&#x27;s going to bring in a framework anyway, which means that self-contained widgets are <i>all</i> going to bring in their own frameworks, which means that instead of one large framework on the page you have five or six, all of them stitched together through rickety HTML-attribute APIs and custom value-parsing strategies because HTML attributes are just strings.<p>I fail to grasp why databinding hasn&#x27;t made it into a web standard yet. The web has a long tradition of feeling out features in the JS world before adopting the successful ones into the platform. jQuery turned into querySelector() and fetch(), CommonJS modules blazed the trail that led to ES modules, etc. And this next paradigm is more than ready to get standardized. Not only would it make the dream of web components possible, it would eliminate the need for a whole lot of the JavaScript out there and even make UIs faster, since reactivity logic would be implemented natively.<p>It&#x27;s such an obvious, ubiquitous improvement to the web that I can only assume there&#x27;s some fundamental implementation roadblock I&#x27;m missing.
评论 #24642571 未加载
评论 #24641919 未加载
评论 #24647542 未加载
评论 #24646536 未加载
评论 #24645518 未加载
评论 #24647873 未加载
评论 #24642450 未加载
评论 #24642817 未加载
评论 #24642483 未加载
评论 #24645120 未加载
评论 #24642466 未加载
评论 #24643650 未加载
评论 #24646560 未加载
评论 #24643568 未加载
评论 #24645996 未加载
ChrisMarshallNYover 4 years ago
I love her description of using a dependency-laden component:<p><i>&gt; Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, all completely unapologetically because “here is my truckload of dependencies, yeah, what”. Many steps are even omitted, likely because they are “obvious”. Often, you wade through the maze only to find the component doesn’t work anymore, or is not fit for your purpose.</i><p>That is so true. The &quot;unapologetically&quot; thing is important. I see this all the time. There&#x27;s often a fair bit of &#x27;tude, where I am looked at with condescension, for not knowing something &quot;obvious.&quot;<p>The fig tree pic is perfect.<p><i>EDIT: Removed phrase that was possibly corrosive to the narrative.</i>
评论 #24641833 未加载
评论 #24641798 未加载
评论 #24641876 未加载
评论 #24651062 未加载
评论 #24642200 未加载
评论 #24642654 未加载
评论 #24644698 未加载
pfrazeover 4 years ago
I completely agree with the author that WCs fail to push more behaviors into HTML. As she describes, you really want to be able to import the WC&#x27;s script and then have new useful HTML tags.<p>I use LitElement pretty extensively, which is a wrapper around WCs, and I like it quite a bit - but it&#x27;s only a minor improvement in my mind compared to React, and that improvement is just reducing the abstractions from the DOM API. It&#x27;s still a mega codebase.<p>I&#x27;ve also tried multiple times to just work with vanilla WCs, and it&#x27;s sensible only up to a very limited point. If you got a JSX&#x2F;lit-html module involved it would go further, but at that point it&#x27;s pretty past &quot;vanilla.&quot; And even then, you&#x27;re not in the realm of &quot;just using HTML.&quot;<p>Author lays a lot of that on the developers having a proclivity for JS, and that may be true, but I&#x27;ve been trying to figure out if this is just complexity in the stack that hasn&#x27;t yet be solved. UIs are complex, you have lots of stateful interactions between them, and I&#x27;m really not sure what the right solution would be for a &quot;do lots via HTML&quot; goal.
评论 #24641667 未加载
评论 #24641730 未加载
评论 #24641689 未加载
c-smileover 4 years ago
&gt; Can we fix this?<p>Sure, by returning to basics.<p>Let&#x27;s assume that Web Component is a DOM element with a code associated with it + lifecycle events.<p>Here is how Components are done in Sciter ( <a href="https:&#x2F;&#x2F;sciter.com" rel="nofollow">https:&#x2F;&#x2F;sciter.com</a> )<p>1. CSS has got `prototype` property:<p><pre><code> div.my-component { prototype: MyComponent url(script&#x2F;components.js); } </code></pre> where <i>MyComponent</i> is the name of class in JS, url (optional) is an URL where this <i>MyComponent</i> can be found.<p>2. In script that custom component is usually represented by ES6 class (+ decorators)<p><pre><code> class MyComponent extends Element { &#x2F;&#x2F; lifecycle event&#x2F;method componentDidMount() { } &#x2F;&#x2F; lifecycle event&#x2F;method componentWillUnmount() { } &#x2F;&#x2F; component specific methods foo() { } bar() { } &#x2F;&#x2F; event handlers - decorated functions @event(&quot;mousedown&quot;) onMouseDown(evt) { } @event(&quot;click&quot;, &quot;button#submit&quot;) onSubmit(evt, button) { } @event(&quot;change&quot;, &quot;input.name&quot;) onNameChange(evt, input) { } } </code></pre> and that&#x27;s it. Sciter lives with this schema more than 10 years - proven to be <i>very</i> convenient and flexible.<p>Yet simple: one property `prototype` + simple wiring of lifecycle events.
评论 #24645818 未加载
评论 #24643504 未加载
verisimilidudeover 4 years ago
Fully agree with the author.<p>My biggest complaint about web components is that I don’t see a lot of advantages over using React, Svelte, or some other JS library. The author hints at this: if I’m already committing to a big JS build process, why wouldn’t I reach for one of these more ergonomic JS tools? Warm fuzzies for trying to use open standards isn’t enough to convince most people to switch away from more popular JS solutions.
评论 #24641859 未加载
评论 #24641900 未加载
评论 #24642049 未加载
评论 #24644957 未加载
cdataover 4 years ago
This article is tailored to attract the web components haters. IMO it does not foster a constructive thread of discussion, and some of the critique just as easily applies to the JavaScript ecosystem overall.<p>Web components have some distance to go before they are ideal for all of their envisioned use cases. In particular, I am awaiting declarative shadow roots, declarative custom elements and template instantiation (&quot;data binding&quot;).<p>That said, the work that has been done so far on them is impressive. Web components by and large have survived the needless antagonism they have received from some corners and proved themselves in production scenarios from companies big and small. If you have interacted with a Salesforce application, you have used web components. If you have visited Github, you have used web components. If you watch videos on YouTube, you have used web components.<p>The ground truth is that web components are solving problems and making headway. They only stand to get better as new capabilities begin to land. I&#x27;m excited for what the future holds.
评论 #24645853 未加载
评论 #24647044 未加载
tarkin2over 4 years ago
The death of HTML imports killed web components for me.<p>With HTML imports, you would import a HTML file. In that file would be css, html and the js to make the component. Then you’d use HTML as usual in your main file.<p>Finally you could create custom components easily while keeping yourself dealing primarily with HTML.<p>Instead, you were forced to use bizarre js import systems. And at that point you were in JS land. Firefox’s decision not to support HTMLImports in favour of waiting to see what happens with JS killed it.
评论 #24648177 未加载
评论 #24647628 未加载
macawfishover 4 years ago
I recently stumbled across &quot;shoelace&quot;, which at a glance seems like an example of what the article is hoping for. It&#x27;s a thoughtfully designed library of UI web components.<p><a href="https:&#x2F;&#x2F;shoelace.style&#x2F;" rel="nofollow">https:&#x2F;&#x2F;shoelace.style&#x2F;</a>
评论 #24641427 未加载
评论 #24642064 未加载
评论 #24641310 未加载
aitchnyuover 4 years ago
TIL of &lt;dialog&gt; which can get by with very little JS. But why is Safari refusing to implement it and why did Firefox put it behind a feature flag for years?
评论 #24645979 未加载
the_only_lawover 4 years ago
Man I remember reading about web components some years ago after reading up on Poylmer Dart. It seemed like they were destined to become a common standard for building web apps <i>soon(tm)</i> but I guess frameworks like React blew up a lot quicker.
评论 #24641743 未加载
gorpomonover 4 years ago
&gt; I’m not sure if this is a design issue, or a documentation issue. Perhaps for many of these web components, there are easier ways to use them. Perhaps there are vanilla web components out there that I just can’t find. Perhaps I’m looking in the wrong place and there is another directory somewhere with different goals and a different target audience.<p>I did a deep dive into web components for a client recently. I tried to see if we could translate an entire Angular component library into Web Components we could share with the entire org and they could use them regardless of wrapping framework. I ran into the same discoverability issues the author did. After finding a new package, I&#x27;d spend some time with it, hit its limitations and then by magically finding the right article I&#x27;d find an entirely different project. In total I ended up sampling: plain JS web components, Svelte, Stencil, lit-element, Angular -&gt; WC, and probably a few more. None ever really seemed to work, and the jank I encountered in them all via slotting seemed to preclude using them-- I could never get rid of a very noticeable Flash of Un-styled Content.<p>The end goal the author talks about sounds really nice, a simple script tag to get more HTML. I think in practice though, that end goal isn&#x27;t so rosy. If your web page is just web components + html&#x2F;css then perhaps it&#x27;s performant enough . But if you&#x27;re working on a truly massive application (think design collaboration tools, etc), then probably you&#x27;ll just want to keep it all in the framework, you&#x27;re already paying a size penalty, might as well not pay a complexity penalty as well.<p>If we can get a simple, useful, and popular web component library as an accepted standard, I think it will be useful to a certain sliver of developer who needs more power than HTML&#x2F;CSS but doesn&#x27;t want to learn lots of JS, but I think that will be a sliver of developers, not many. For the rest, I can imagine single-file-per-component compilation based frameworks like Svelte will obviate the need for web components. Remember, html is for the authors, not the consumers of web pages, and if your app is suitably large enough you&#x27;ll probably need complexity managed in several ways (global state, UI components, data fetching, etc) and in that sense a framework will likely serve you better.
cletuswover 4 years ago
&gt; &quot;I just wanted something that is small and works like a normal HTML element&quot;<p>My first stop when looking for a web component is always <a href="https:&#x2F;&#x2F;component.kitchen&#x2F;elix" rel="nofollow">https:&#x2F;&#x2F;component.kitchen&#x2F;elix</a> because of their commitment to the Gold Standard (<a href="https:&#x2F;&#x2F;github.com&#x2F;webcomponents&#x2F;gold-standard&#x2F;wiki" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;webcomponents&#x2F;gold-standard&#x2F;wiki</a>), which is basically to imitate native elements wherever possible.
aazaaover 4 years ago
&gt; The other day I was looking for a simple, dependency free, tabs component. You know, the canonical example of something that is easy to do with Web Components, the example 50% of tutorials mention. I didn’t even care what it looked like, it was for a testing interface. I just wanted something that is small and works like a normal HTML element. Yet, it proved so hard I ended up writing my own!<p>I was looking for some examples of the better approach the author seems to want, but didn&#x27;t find them.<p>Found some in the article linked near the bottom:<p><a href="https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2017&#x2F;02&#x2F;designing-html-apis&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.smashingmagazine.com&#x2F;2017&#x2F;02&#x2F;designing-html-apis...</a><p>The author gives an example of a list-type component. It can be initialized in one of two ways:<p>- JS-first: an empty list element is added and a JS initializer populates the children from data<p>- HTML-first: the full markup for the list is added, including children, and the JS works in the background to build the right internal data representation<p>The rest of the article gives specific, actionable advice on building HTML-first components. For this reason, I think it&#x27;s a better article to start with.
评论 #24645115 未加载
dmixover 4 years ago
I wasn’t aware that web components were promising advanced interactivity on the web without JS still doing the heavy lifting.<p>I watched those early google talks too and he’s right that doesn’t seem like what they were promising earlier.<p>I think OP confused including components using native HTML style tags would somehow also help solve the giant disparity in what you can accomplish with pure html&#x2F;css and with JS added on top.<p>The stuff about JS being dependency and framework heavy seem thrown in but is a bit of a different problem and often comes with the territory with any complex JS.<p>If Web components weren&#x27;t ever really going to promise a new JS free future (other than being a clean way to maintain complex layouts and import isolated&#x2F;reusable chunks of UI) then those ancillary arguments about the JS ecosystem are a different and somewhat unrelated problem.<p>This is mostly about the others misguided idealism that doesnt sync with the IRL demands on frontend development for interactivity and complex state management vs the very limited offerings of pure HTML.
richardanayaover 4 years ago
I’m personally super excited for lit-html’s future in web components. It feels much simpler.
sergeykishover 4 years ago
Web Components were crafted for jQuery world.<p><pre><code> $(&quot;#datepicker&quot;).datepicker() </code></pre> Custom elements resolves problem we had with XHR HTML response, it instantiates automatically. Problem solved. Widgets were popular and easily broken by CSS, solved by Shadow DOM.
评论 #24644681 未加载
k__over 4 years ago
I always saw WCs as the leaves to the root that CSS frameworks already offer.<p>You can drop in Bootstrap and the whole page looks nice, but the moment you want to use the GUI elements that consist of multiple HTML tags, things get ugly.<p>WC would offer a way to merge these into one element.<p>Then you could drop your JS framework of choice in the middle and be done with it.<p>React isn&#x27;t cool anymore? Well, at least you can take Bootstrap and its WCs with you. I had the impression CSS frameworks had a longer half-life than their JS counterparts anyway.<p>I don&#x27;t really care about all that HTML module stuff or JS requirements. Sure would be cool if things were different, but from a practical POV it doesn&#x27;t seem THAT important to me.
Animatsover 4 years ago
What&#x27;s so embarrassing is that the HTML&#x2F;CSS&#x2F;Javascript mess does roughly the job Visual Basic did. But worse.
评论 #24643900 未加载
评论 #24666706 未加载
sam_goodyover 4 years ago
If there was a way to write JS within the component, I think that they could have taken off - just see how well components are in React, Vue et al.<p>And to get that to happen, all you would need is the ability to refer to `this` within the component. Aside for that, treat the JS within the component as a module, ability to access global vars, but within scope.<p>But instead, you are expected to put the relevant JS in the code that creates the component (in the parent document), which means that reusability and is a pipe dream, and components are really not componentized.
评论 #24646817 未加载
评论 #24647958 未加载
divbzeroover 4 years ago
It’s hard to tell from the comments here, but the author actually ends her article on a hopeful note and offers concrete proposals on how we could fix the shortcomings of Web Components and fulfill its promise:<p>– No dependencies beyond one &lt;script&gt; tag<p>– Syntax and API in line with conventions of built-in HTML elements<p>– Accessible by default via ARIA<p>– Themeable via ::part(), selective inheritance, and custom properties<p>– Only one component of each type in the directory<p>Which proposals would be beneficial is up for debate (<i>esp.</i> the last one IMO) but they’re worth highlighting and discussing.
wnevetsover 4 years ago
&gt;who revel in complex APIs, overengineered build processes and dependency graphs that look like the roots of a banyan tree.<p>I keep thinking I&#x27;m just being old and cranky whenever I go through &quot;modern&quot; projects and my eyes cross at the overengineering and complexly. Does this mean other people are starting to see this aswell?
stevebmarkover 4 years ago
If you work in the Salesforce ecosystem, you know they are doubling down on their use of web components in their &quot;modern&quot; development process. This has lead to a very poorly designed ecosystem. It&#x27;s infuriating they continue to double down on a system that the rest of us are rightfully abandoning.
systemvoltageover 4 years ago
What is a well designed component given current limitations of HTML spec?<p>There is no way around it. The author makes really good points but offers no solution. Just complains.<p>Would love to know more how we can do this better if there is a way.
dannymoerkerkeover 4 years ago
I wrote a response to this article, Lea was kind enough to respond to it by the way: <a href="https:&#x2F;&#x2F;medium.com&#x2F;swlh&#x2F;the-failed-criticism-of-web-components-ee94380f3552?source=friends_link&amp;sk=406daa6d2bb0a0e563f501bc8a99c4f5" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;swlh&#x2F;the-failed-criticism-of-web-componen...</a>
int_19hover 4 years ago
For the past 10 years or so, every time I read one of those articles on the state of modern web development, I&#x27;m thankful that I&#x27;ve dodged that bullet. Coming from the desktop world, it feels like the amount of complexity exposed to the end users of all those frameworks is quite insane compared to what they&#x27;re getting from them.
atum47over 4 years ago
Hi, please take a look at my FOS library. I tried to do exactly what the article describes a web component should do - extends HTML providing new elements that can be used without any further &quot;programming&quot;.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;victorqribeiro&#x2F;fos" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;victorqribeiro&#x2F;fos</a>
shams93over 4 years ago
I&#x27;m using lit-element for a project it&#x27;s much more usable than writing components from scratch. The growth of complexity on the client side is really quite staggering and thanks to browser stagnation I doubt it will get better any time soon. A platform that should be low code is really maximum over code!
ChrisArchitectover 4 years ago
what the, this was already on here a bunch of times a week ago when it was news<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24581439" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24581439</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24587413" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24587413</a><p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24587413" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24587413</a><p>and a response post: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24606342" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24606342</a>
评论 #24647562 未加载
评论 #24646281 未加载
devwastakenover 4 years ago
Something about this website makes mobile chrome scroll at low fps.
rektideover 4 years ago
It would have helped a lot if JS had a working modules systems on the web.<p>&gt; What hope do those who can’t write JS have? Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, all completely unapologetically because “here is my truckload of dependencies, yeah, what”.<p>JS has been in a dark &amp; ugly spot, &amp; WebComponents feeling janky &amp; weird is probably 50% the fact that JS is this dark twisting maze where each project has it&#x27;s own very unique assumptions about how to turn authored JS into usable, deployable JS. We&#x27;re still hoping, praying that import-maps eventually give us modular javascript code that we can deploy, without having to push it through a handful of compile&#x2F;build tools: <a href="https:&#x2F;&#x2F;github.com&#x2F;Fyrd&#x2F;caniuse&#x2F;issues&#x2F;4810" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Fyrd&#x2F;caniuse&#x2F;issues&#x2F;4810</a><p>By compare, Big Framework land often adopts some suggested normative best paths people can work with (ex, create-react-app bundling build&#x2F;test&#x2F;&amp;c tools). Alas, the language itself is still, a decade latter, trying to proceed to useable modules on the web.<p>The other major point of this article tends towards a JS vs HTML problem, another area I am very sympathetic to &amp; have hopes for.<p>&gt; Far more people can write HTML than JS. Even for those who do eventually write JS, it often comes after spending years writing HTML &amp; CSS. [...] If components are designed in a way that requires JS, this excludes thousands of people from using them.<p>There are ongoing efforts with HTML Modules ( <a href="https:&#x2F;&#x2F;www.chromestatus.com&#x2F;feature&#x2F;4854408103854080" rel="nofollow">https:&#x2F;&#x2F;www.chromestatus.com&#x2F;feature&#x2F;4854408103854080</a> ) to try to make, among other things, bringing in WebComponents much easier, and Declarative Custom Elements ( <a href="https:&#x2F;&#x2F;blog.usejournal.com&#x2F;w3c-declarative-custom-elements-proposal-b9640e54a5fd" rel="nofollow">https:&#x2F;&#x2F;blog.usejournal.com&#x2F;w3c-declarative-custom-elements-...</a> ) to make building modules much more HTML-centric &amp; declarative versus today where most of the authoring of a custom element has to be done in JS.<p>There are very real problems, there is too much js, the js module system is still in a 1&#x2F;2 complete state on the web, &amp; these very much dog Web Components. But the future is exciting, &amp; I continue to have hope that a much better, much more web native way of building emerges on the web platform. Lea talks a lot to how scattershot the last decade of work has been, how inconsistent, but given the other ecosystem constraints I&#x27;m not fully surprised, &amp; I&#x27;m delighted that we are spending so long building &amp; experimenting &amp; learning, that for many of us, the hunger is very real. Also missing, the big adopters of WebComponents have been pretty silent, their thought-leadership seems missing: Youtube, Github. There are visible people from these worlds talking about WebComponents, but to my knowledge the real experience of WebComponents at scale from the very successful adopters remains a story not told.
评论 #24641396 未加载
评论 #24641781 未加载
评论 #24667340 未加载