[dobexx]

Fixes #315.

Since 8.2.20, an expression in an attribute of a nested SVG element in an html template (e.g. <rect x="${x}">) throws a TypeError when the element has a read-only property of that name (x, width, points, transform, href on <use>, viewBox on <symbol>, …). Reproduction and version table in #315.

resolveProperty() only skips the <svg> root (src/template/resolvers/property.js:35, isProp = target.tagName !== "svg";). For <rect>, "x" in target is true (getter-only SVGAnimatedLength), so the assignment in property.js:48 throws in module code. The SVGElement check was introduced in 6000823 ("svg element expressions always set attribute value") and kept until 8.2.19; bdd8716 (#253) replaced it with the tag-name check while adding the camel-case fallback. The mixed-value path still checks for SVGElement (src/template/core.js:433-435), and the "svg element" tests only cover the <svg> root.

The docs suggest the svg function for the internal structure of <svg> (docs/component-model/templates.md:47). But html already parses nested SVG elements into the SVG namespace, static attributes and mixed values work, and single expressions worked up to 8.2.19, so the TypeError looks unintended.

This change restores the SVGElement check. Elements in the SVG namespace get attributes, as in svg templates and with mixed values. HTML and custom elements, also inside <foreignObject>, keep the property lookup and the camel-case fallback from bdd8716.

Side effect: a writable property without an attribute on an SVG child in an html template, such as textContent="${text}" on <text>, is set as an attribute again, as in 8.2.19 and in svg templates. Since 8.2.20 it has been set as a property. Properties that reflect an attribute, such as tabIndex, give the same result either way.

Regression test in test/spec/html.js ("svg element"): <rect x width> and <polyline points> inside <svg> in an html template. It fails without the fix (Chrome Headless: Cannot set property x of #<SVGRectElement> which has only a getter, WebKit: Attempted to assign to readonly property.) and passes with it. Full suite in Chrome Headless and WebKit: 609 of 609 with the fix, 608 of 609 without it (main alone in Chrome Headless: 608 of 608). Firefox was not run locally. Lint is clean, and prettier is clean for the changed files.

[coveralls]

coverage: 99.875%. remained the same — dobexx:fix/template-svg-nested-attributes into hybridsjs:main

[smalluban]

Thanks for the PR!