CSS custom properties can cross the Shadow DOM boundary. Regular CSS values cannot. That single fact is the engine behind this entire article, written by Andy Clarke for Smashing Magazine, and it solves a problem that has frustrated SVG animators for years: you can define a character or icon once inside a `<symbol>`, reference it with `<use>` across multiple contexts, and still give each instance its own colors, transforms, and animation timings, all without duplicating a single element.
The Shadow DOM barrier is not a bug. When a browser renders `<use href="#outlaw-1">`, it creates an encapsulated shadow tree. CSS rules targeting elements inside that tree are blocked at the boundary. Clarke's fix is to define `transform`, `fill`, and `opacity` values inside the `<symbol>` using `var()` with fallbacks, then pass different custom property values to each `<use>` instance via inline styles or data-attribute selectors. A foot-tapping animation becomes a `@keyframes` block that animates `--foot-rotate` from `0deg` to `-5deg` to `2deg`, and each character instance gets its own timing without touching the symbol definition.
The article is worth reading in full because the conclusion is not the interesting part. The interesting part is the step-by-step construction: how Clarke built a hidden SVG symbols library, split large and small screen layouts into separate SVGs referencing the same symbols, and then layered a multi-coloured icon system on top of the same technique. The method works in every contemporary browser today, with no polyfills required.
[READ ORIGINAL →]