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