https://ellie-app.com/8BXxRxXdDhja1
That is an example of changes that can only be made to the web component by using custom properties, done as it would be ideally and also using a work-around to show what is trying to be achieved.
As mentioned previously, another example can be found in this issue on elm-fontawesome, where the FontAwesome library provides duotone icons where each tone can have its opacity and colour set independently, using custom properties. This has an image example of what is being aimed for, a code example using the work-around and how it’d work given support for custom properties.
One of my other points was for user stylesheets, and clearly there isn’t really an example to give there: any time you use inline styles the user can’t override them without resorting to huge hacks which impairs accessibility.
With Houdini, you can see an example masonry layout here which is only configurable via custom properties.