Sisyphus Had It Easy: Navigating the Web Component Styling Landscape

Abstract

Every time you think you've figured out web component styling, you hit a hidden limitation and have to start over. Shadow DOM encapsulation breaks your global styles. Constructable stylesheets have browser support gaps. CSS custom properties work until they don't scale. You roll the boulder up the mountain, only to watch it tumble back down.

This talk will show us how to break the cycle. We'll map the complete styling landscape — from constructable stylesheets to CSS parts, from custom properties to global inheritance patterns. You'll learn which approaches actually hold at the summit, understand the tradeoffs that matter, and walk away with a decision framework that keeps you out of a constant refactoring cycle. The mountain doesn't get smaller, but the path to the top becomes clear.

Alternate title: Beyond the Boulder: Escaping the Sisyphean Cycle of Web Component Styling

Outline

Introduction

timing: ~3 minutes

• Quick intro and the setup: why does styling web components feel like an endless uphill battle?
• The cycle many developers experience: try an approach, hit a wall, start over
• Preview: we're going to find a path that sticks

The Foundation: Understanding Shadow DOM Boundaries

timing: ~5 minutes

• The boundary that causes most of our problems
• What crosses the boundary (inherited properties, custom properties) and what doesn't
• Why understanding this prevents you from rolling the same boulder twice
• Demo: showing inheritance patterns in action

Strategy 1: Constructable Stylesheets

timing: ~6 minutes

• tldr; what they are and how they work
• Performance benefits of sharing stylesheets across components
• Write styles once, use them anywhere; a solution for complex systems
• Browser support: the gap that might send you back down the mountain
• When this approach reaches the summit vs. when to choose differently
• Code example: implementing a shared design system stylesheet

Strategy 2: CSS Custom Properties

timing: ~6 minutes

• The theming approach that crosses boundaries
• Patterns for creating flexible, customizable components
• The cascade challenge: what happens when your system grows beyond a few dozen properties
• Real example: building a themeable component that doesn't collapse under its own weight

Strategy 3: Global Styles and :host

timing: ~5 minutes

• Using global stylesheets with web components
• The :host selector family and specificity considerations
• Trade-offs: convenience vs. encapsulation
• When this shortcut saves effort (and when it costs you later)

Strategy 4: Part and Slotted Selectors

timing: ~4 minutes

• Exposing styling hooks with ::part
• Styling distributed content with ::slotted
• The limitations that might surprise you
• Quick examples of each in practice

Finding Your Path Forward

timing: ~3 minutes

• Decision framework: matching strategies to constraints
  • This will be a visual representation and the key take-away from the talk
• Patterns that hold under pressure vs. approaches that crumble at scale
• How to evolve your strategy without starting from scratch each time

Wrap-up

timing: ~1 minutes

• Key takeaways: building on solid ground (emphasizes choosing the right approach for the constraints of the project)
• Resources for continuing the journey
  • This will include links to detailed articles I'll publish in tandem with the talk so that the audience can dive deeper into specific styling methods presented here

Why This Talk?

I've spent several years building and maintaining design systems using web components at enterprise scale, first at Red Hat, then for Adobe. Through this work, I've pushed every styling approach up the mountain — some made it to the top, most rolled back down - and along the way I learned how to navigate paths based on the real-world conditions and limitations of each project.

The frustration I see in the community is real: developers choose or learn a certain styling strategy, build components with it, then discover fundamental limitations that force them to refactor everything. They're caught in a cycle, repeating the same journey with different tools, never quite finding stable ground.

The web component styling story has matured significantly, but the guidance remains fragmented. Developers face critical decisions early — before they understand the terrain — and those choices compound as their component libraries grow. A wrong turn at the base of the mountain means more work later.

This talk distills years of trial and error, along with production experience into clear guidance. Rather than prescribing a single approach, I aim to help developers understand the landscape well enough to choose the right strategy for their specific project — whether that's browser support constraints, tooling restrictions, performance requirements, or the degree of customization they need to support.

The goal is simple: help developers stop repeating the cycle and start building on solid foundations.