Here is an SEO Friendly Way to Handle Forms with Web Components

A guide on how to handle forms with web components in an SEO-friendly method.

A general misconception around Web Components exists in the community which, in my opinion, is because we are so used to these JavaScript-heavy web libraries and framework echo-system that it becomes easier to think of Web Components technology as something that is “lacking”. Which, to an extent, is true.

I see web components technology as an opportunity to rethink the way we build the web. It requires you to cleanse from the madness of React, Vue.js, and the Angular world to step into that creative mindset to see its potential. It has a lot of room to improve yes, but it is up to us to define what it can become.

Let’s look at some of the criticism:

• Still requires JavaScript: I find this criticism hypocritical when almost all UI libraries and frameworks require JavaScript or some other language to work. If React projects can be built on the server with SSR, so can web components.
• Not SEO friendly: Most web libraries compile plain HTML and JavaScript to work on the browser. By exposing the inside of the components in the browser allows you to be SEO friendly, especially if you SSR. Again, I would like to challenge that in this article by showing a different way to approach this problem.
• API is not good enough: using web components technology does not save you from the painful and tedious work of doing DOM manipulation and manual state management. I feel the community on that. Again, that's why we have web components libraries as well as other web libraries to improve the developer experience. They are all attempts at improving the DOM API experience.

Allow me to show you how

Let’s start with a form since it is commonly used to demonstrate how Web Components are not SEO friendly. Look at the following:

<form action="/login" method="post" novalidate>
    <p class="error-message" hidden></p>
    <input type="email" name="email" 
       placeholder="Email" 
       title="Please provide email" required>
    <input type="password" name="password" 
       placeholder="Password"…