What we are able to build using the web platform has gone into overdrive, especially in the last two years. Most of the action has been in the areas of CSS and JavaScript, but there have also been some important additions to HTML. However, one piece of the puzzle has proven to be elusive: the ability to build reusable and isolated components. But wait, what about web components? I hear you ask, and you would be correct. With the HTML template element, custom elements, and the shadow DOM finally getting widespread adoption in user agents, we can build components that satisfy most of our needs. Leaving the complaints about the general developer experience when writing web components aside for the moment, there is one rather striking challenge that still has most web developers reaching for a framework: server-side rendering and/or static site generation. There are multiple reasons we may want to take advantage of server-side rendering. Some of these are related to performance and accessibility, but also to search engine optimization, which is still an important topic in 2024, even though Perplexity and friends might want us to believe differently.

I would much prefer to know that users can access a page's content even if JavaScript fails to execute for whatever reason. Also, some applications (both desktop and web-based) do not execute JavaScript and instead opt to provide the user with a clean and distraction-free reading environment. In these instances, web components will let you and your users down. The web and the technologies that power it are constantly evolving, and so too have web components. In this article, I will first highlight the challenge that has made using web components, specifically the shadow DOM, a non-starter for many projects. But then, we will explore an evolution of shadow DOM that is already well-supported in modern browsers, known as declarative shadow DOM, and learn how it breaks down one of the final obstacles and enables us to write reusable, isolated web components that can be server-side rendered or used as part of a statically generated website. Note: I will lean on the Astro framework to demonstrate the problem with shadow DOM and the solution enabled by declarative shadow DOM.

However, this will be purely for the "server-side rendering" (or Top Source Media services static site generation, depending on how you wish to look at it) capability. The framework or technology also does not have to be JavaScript or Node-based; the same results can be achieved using other frameworks such as Django (Python), Ruby on Rails (Ruby), Laravel (PHP), or Rocket (Rust). To understand some of the challenges with shadow DOM and why you would want to use It, we will build a simple user card component. We do have a couple of requirements that need to be met when building and using this component. We want clean, semantic, and accessible HTML. We want our CSS to be scoped to our card component but, TopSourceMedia we do not want to have to write our CSS in JavaScript and would prefer to have our component CSS in its own CSS Top Source Media file. The data for each card will come from an external API so we need a way to load this data.

We want to be able to access our card components with their data available, even if JavaScript is not available. We want to be able to use our component during server-side rendering, as part of a statically generated site, or even in more traditional server based frameworks such as those mentioned in the note earlier in this article. We would very much appreciate a great developer experience that allows for ease of implementation and maintainability. That is quite a set of requirements, but they are not uncommon when building software and websites for the web. Let us start by satisfying our first requirement: we want clean, semantic, and accessible HTML. That is a lot of HTML! For the most part, though, you have most likely seen all of it before. The only two items that might be new are the nimbus-team element and the template element. The first, nimbus-team is our custom element that does not really exist yet.