---
title: "Day 28: custom properties and web components"
url: https://daily.dev/posts/day-28-custom-properties-and-web-components-2fhshdjrs
source_url: https://www.matuzo.at/blog/2022/100daysof-day28
type: article
source: "Manuel Matuzović"
published: 2026-06-22T14:42:28.478Z
updated: 2026-06-22T14:44:46.756Z
tags: ["css", "html", "web-components"]
reading_time: 3
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Day 28: custom properties and web components

**[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 3 min read · 0 upvotes · 0 comments

## Summary

CSS custom properties (variables) can pierce the Shadow DOM boundary of web components, allowing external styling without modifying the component internals. By defining custom properties with fallback values inside a web component's shadow styles (e.g., `var(--alert-bg, rgb(136 177 255 / 0.5))`), consumers can override visual appearance by setting those properties on the host element from outside — enabling theming variants like error and success states without touching the component's code.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.matuzo.at/blog/2022/100daysof-day28>

## Similar posts on daily.dev

- [Shadow-piercing local component variables](https://daily.dev/posts/shadow-piercing-local-component-variables-dymj4l3sd) · Dave Rupert · 0 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#web-components](https://daily.dev/tags/web-components)

[View this post on daily.dev](https://daily.dev/posts/day-28-custom-properties-and-web-components-2fhshdjrs)