This is extraordinary. While JavaScript is needed now, I’d encourage the author to see what needs to be added to CSS to allow a CSS-only solution, and promote it in the CSS community. For example, repeating the clef when wrapping is akin to a sticky table header, and would have more applications than only music.

Some CSS notation is wholly new to me:

> .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }

I’ve never seen CSS selectors with square brackets before. Apparently it’s an attribute selector: https://css-tricks.com/attribute-selectors/