Presentational mixup

This is a relatively sad story. The tale of a path element who dared to color itself with the fill attribute, but to be courteous, gave space to a custom property.

<path
	fill="var(--custom-fill, currentColor)"
	d="M -0.75 -3.5 C -0.5 -3.75 0.5 -3.75 0.75 -3.5 C 1 -4 1.25 -4.75 1.5 -5 C 1.75 -4.75 2.25 -3 2.5 -2 C 2.5 -2.5 3.5 -3.75 3.75 -4 C 4.5 -4 7 -3 7 -2.5 C 6.5 -2 5.5 -2 4.75 -2 C 4.75 -2 5 -0.5 5 0.25 C 4 0.25 3 0 2.5 -0.25 C 2 1 1 2.25 0 2.75 C -1 2.25 -2 1 -2.5 -0.25 C -3 0 -4 0.25 -5 0.25 C -5 -0.5 -4.75 -2 -4.75 -2 C -5.5 -2 -6.5 -2 -7 -2.5 C -7 -3 -4.5 -4 -3.75 -4 C -3.5 -3.75 -2.5 -2.5 -2.5 -2 C -2.25 -3 -1.75 -4.75 -1.5 -5 C -1.25 -4.75 -1 -4 -0.75 -3.5 Z"
/>

At any point in the parent scope, any element can set the value to have the color navigate and flow to the relevant node.

svg {
	--custom-fill: hsl(31 18% 23%);
}

Enter a sneaky figure, a malinformed character who decides that the vector needs styling, and a stylesheet is the proper way to update its features. “Just point to the node and update the fill, there is certainly a property in the CSS spec.”

path {
	fill: hsl(30 84% 74%);
}

The code works, but alas the chain is now broken. So let this be a lesson, for SVG attributes are presentational in nature. and CSS properties will always come first. And for this time specificity comes before the cascade.