When you want to add a box shadow to an element, but don’t want to override any it might already have. (Jump to code)
We could copy the
box-shadow property from the element in question, paste it and append our additional shadow at the end. Of course, this requires us to know the box-shadow on the target element, which might not always be possible (say, making a reusable
StackOverflow says to put the shadow on an absolutely-positioned pseudo-element. This leaves us with a similar problem to the one we started with — the element in question might already have styles on the
::after that conflicts with ours.
Use CSS variables to apply box shadows.
--box-shadow: .5em .5em 1em #333;
Later on, you can tack things on at the end of this variable, like so:
box-shadow: var(--box-shadow), 0 0 .1em #fff inset;
One drawback is that we cannot use this technique in several classes and apply them to one element. We can solve this problem when
parent-var() is a thing in CSS — if it already is by the time you read this post, do let me know!