[css-masking-1][filter-effects] Allow custom or inverse effects order

[clshortfuse]

Spec:

The compositing model follows the SVG compositing model [SVG11]: First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects [FILTER-EFFECTS], clipping, masking and opacity.

https://www.w3.org/TR/css-masking-1/#placement

The ability to choose to apply masking/clipping before filter allows complex shapes to receive shadows based on the rendered shape, not after.

I built a codepen to visualize the inability to construct a scalable, custom-shaped, shadowed, single-element.

https://codepen.io/shortfuse/pen/bGQjorJ?editors=1100

Generally, filters apply, and then they get masked/clipped which would nullify drop-shadow. Using a SVG filter from the DOM is possible, but you don't have nearly as much control as the CSS Mask and Clip effects. They are not scalable.

If we are able to change the effects order we would not have to forced to wrap elements with to then use a filter. This is important for simplifying elements when using ShadowRoot and elements that cannot use ShadowRoot (Customized Built-in elements).

[clshortfuse]

Alternatively, a second-pass filter that applies at some point after mask/clip could be a possibility. This is how backdrop-filter works, if I understand it correctly.