For a frontend developer, Drupal is old-school. For the past decade, developers have been experimenting with JavaScript-based frontend frameworks that completely replace Drupal's frontend. But what if we could inject a fully modern JavaScript API into Drupal's rendering system? Can Single Directory Components and Declarative Shadow DOM get us there?

Prerequisite
Participants should be familiar with the trade-offs of server-side rendering versus client-side rendering. For those unfamiliar with Web Components, we will briefly go over the standard's APIs: Custom Elements, Shadow DOM, and HTML Templates.

Outline
Drupal's old school theming system is server-side rendering. And in the tech world, everything old is new again. In the last two years, modern frontend frameworks have been trying to figure out how to server-side render their client-side JavaScript.

Some JavaScript frameworks, like React v19, have figured out how to split their components into client-side and server-side rendered parts. As of August 2024, this same "split component" capability is now a part of native Web Components with the introduction of Declarative Shadow DOM.

When Web Components were introduced they were client-side only; they had to be written in JavaScript. Declarative Shadow DOM allows a web component to be defined using HTML and CSS only.

So if Drupal was server-side rendering before it was cool, can we leverage Declarative Shadow DOM inserted into Single Directory Components to make Drupal cool again?

Learning Objectives
You'll learn:
• How Declarative Shadow DOM works
• How server-side Web Components get client-side JavaScript with Custom Elements and Shadow DOM
• How SDC components align with Web Components, including both of their "slot" concepts

This session will have a collaborative Q&A. Bring your questions. And better yet, bring some answers!

Experience level
Intermediate