The age of React.js is over. Web Components have arrived. Learn practical tips to building or reusing design systems with Web Component APIs and SDC.

Prerequisite

Developers should be familiar with SDC and JavaScript; expert knowledge is not required.

Target Audience

Frontend developers and designers

Outline

In the past several years, JavaScript frameworks, like React, have introduced server-side rendering to improve front-end performance metrics. All while browser-native Web Components have been stuck with client-side rendering only. But in August 2026, server-side rending Web Components became Widely Available in all major browsers. The age of React.js is coming to an end.

With browser-native APIs, aka The Platform, we can use the full range of vanilla JavaScript, HTML and CSS to create design systems that don’t need extra frameworks or bundlers. And using native JavaScript APIs instead of front-end frameworks is fast. Really fast.

What's best is that Drupal’s SDC, Single Directory Components, make building out these kind of components a breeze. So come and learn practical tips to building or reusing design systems with Web Component APIs and SDC.

In this session, we will:
• Briefly review the three APIs of Web Components: Custom Elements, Templates and Slots, Shadow DOM
• Discuss the accessibility issues with Shadow DOM
• Compare components with declarative Shadow DOM vs Light DOM
• Techniques for using SDC to build Light DOM and Shadow DOM web components

Learning Objectives

In this session, we will:
• Briefly review the three APIs of Web Components: Custom Elements, Templates and Slots, Shadow DOM
• Discuss the accessibility issues with Shadow DOM
• Compare components with declarative Shadow DOM vs Light DOM
• Techniques for using SDC to build Light DOM and Shadow DOM web components

Experience level
Intermediate