Check for duplicates

• I have searched for similar issues before opening a new one.

Problem

Selection is currently done using a custom SVG filter:

This makes customization difficult especially when combined with other possible states (such as active focus).

Request

It would be preferable for selection to be styled using pure CSS such that it can be combined with other possible states.

Alternatives considered

No response

Additional context

This has been explored in #8875 and it's not obvious exactly how to solve it. Some possibilities that have been explored as well as discussed with @rachel-fenichel:

• Use a stroke to simulate a border highlight. This causes a cutoff due to the way blocks are stacked atop each other.
• Expand the height of a block so that its stroke wouldn't be cut off, however this could cause a visual jittering that may be distracting when switching between blocks (especially with keyboard navigation).
• Create and maintain a custom highlight path that always renders after the block stack (and thus on top per the SVG spec) where blocklySelected can then apply a stroke property and control visibility of this special highlight element. It's still tricky, however, as this element requires custom lifecycle management and it can't be a child of the block's g element (which means blocklySelected has to get applied to a different element tree than it does today).