Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

Builds based on #2938

Current Behavior

If i add an <svg> to the jsx, Stencil hydrate adds a class to this element on server-side rendering.

Upon Hydration, Stencil tries to parse the classList of this element, but an error is thrown in parseClassList function:
https://github.com/ionic-team/stencil/blob/main/src/runtime/vdom/set-accessor.ts#L157

index-1d3c5472.js:3001 TypeError: value.split is not a function
    at parseClassList (index-1d3c5472.js:1780:56)
    at setAccessor (index-1d3c5472.js:1640:32)
    at updateElement (index-1d3c5472.js:1794:17)
    at patch (index-1d3c5472.js:2193:17)
    at updateChildren (index-1d3c5472.js:2002:13)
    at patch (index-1d3c5472.js:2199:13)
    at updateChildren (index-1d3c5472.js:2002:13)
    at patch (index-1d3c5472.js:2199:13)
    at updateChildren (index-1d3c5472.js:2002:13)

The problem seems that element.className returns an SvgAnimatedString for svg-Elements instead of an expected string.

In the updateElement method we see that oldVNodeAttrs holds the SvgAnimatedString instead of a normal string.

Expected Behavior

Updating the class in Stencil Hydrate on svg Elements should work.

System Info

Stencil 2.23.2, don't know if v3 is also affected.

Steps to Reproduce

Add an <svg> element to a component. Use Stencil Hydrate and render the components server-side. Error occurs on client side hydration.

render() {
   return <svg></svg>;
}

Code Reproduction URL

Maybe later when i have time.

Additional Information

No response