Isomorphic Web Components

I don't really think server-side rendering is an important reason why most people don't use web components. Most web applications that use components of any sort are largely SPAs of some variety and don't care one bit about server-side rendering. In my opinion, the main reason web components aren't widely used is that the alternatives are just better. I'm yet to see a strong case being made where web components are favorable for a reason other than purism.

Only partially related to the blog post, but...<p>The thing that is lost on me with all of these webcomponents solutions is that they inevitably rely on tagged templates to do the heaviest lifting.<p>I don&#x27;t want to write strings, I want to write statically analyzable code. IDEs do some heavy lifting here for visual hints, and there are a few html-in-js linting solutions, but none of them are very compelling.

Enhance is super cool and the fact that it can be called from basically any server language makes web components really powerful &amp; reusable.<p>I work on one of the underlying libraries that provide it said portability, Extism, and I love to see how WebAssembly actually bring some of the coolest parts of the web browser into other applications.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;extism&#x2F;extism">https:&#x2F;&#x2F;github.com&#x2F;extism&#x2F;extism</a>

Great stuff, but if you are writing your own components just stick to light DOM and do not write code to generate DOM elements for the component to look right.<p>Let&#x27;s say you are making a splitter component. Do not do this:<p><pre><code> &lt;my-splitter&gt; &lt;div slot=&quot;left&quot;&gt; &lt;my-handle slot=&quot;handle&quot;&gt; &lt;div slot=&quot;right&quot;&gt; &lt;&#x2F;my-splitter&gt; </code></pre> With some divs on the inside assigned to slots. Instead do this:<p><pre><code> &lt;my-splitter&gt; &lt;div data-slot=&quot;left&quot;&gt; &lt;my-handle data-slot=&quot;handle&quot;&gt; &lt;div data-slot=&quot;right&quot;&gt; &lt;&#x2F;my-splitter&gt; </code></pre> Looks almost the same right? Except the one at the bottom is trivially server-side rendered. *It already is*.<p>Stay on the light side.

Lit has an experimental SSR plugin:<p><a href="https:&#x2F;&#x2F;lit.dev&#x2F;docs&#x2F;ssr&#x2F;overview&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lit.dev&#x2F;docs&#x2F;ssr&#x2F;overview&#x2F;</a><p>I also sort of made SSR work under next.js (not to be mixed with server-components), but that took a lot of hacks and going off the beaten path:<p><a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;@lit-labs&#x2F;nextjs" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;@lit-labs&#x2F;nextjs</a>

Front-end people keep using the word “isomorphic”.<p>I don’t think it means what they think it means.<p>To me, two types of values are isomorphic if they share the same cardinality. The isomorphism between two isomorphic types is a pair of morphisms (functions) that when composed one after the other is the same as doing nothing.<p>This word is a couple hundred years old, so it long predates front-end development. It has a pretty specific and established meaning in mathematics. It’s not right to use this word when you just mean “shared code”.