r-svg-eqn illegally sets attributes in its constructor

[justinfagnani]

Custom elements are not allowed to set their own attributes in the constructor. This is because new SomeElement() should be created without attributes, like every built-in element.

<r-svg-eqn> does this here: https://github.com/curvenote/svg/blob/main/src/components/equation.ts#L60

This limitation is enforced by browsers, but only when elements are defined before parsed in the main page. This happens when using the bundled script from https://unpkg.com/@curvenote/article. Since that script is a classic script, and not a module, it is executed before the rest of the page parses, then when <r-svg-eqn> is parsed it's instantiated, sets an attribute, and errors.

Here's a live reproduction that starts our not working. You can see the error in the console.

You can make it work by adding async to the curvenote script, causing it to run after the page is parsed, or by commenting out the <r-svg-eqn> elements.

In this case this can probably be fixed by giving the stroke property a default value instead of setting the attribute, which is also how reflected properties in built-in elements work.