Parse raw html against the element it is inserted into, so svg keeps its namespace - #893

Description

raw() put its nodes in the xhtml namespace, so svg markup rendered as nothing.

The markup was parsed by assigning innerHTML on a <template>, where the html parser has no element to parse against. <circle> therefore came out as an unknown html element rather than an svg one — present in the dom, laid out as nothing. Server-rendered output showed the shape, and it disappeared the moment the component hydrated, which is what #567 reports.

It is now parsed with Range.createContextualFragment against the nearest ancestor element, so the nodes come out in that element's namespace. The element is already reachable from the component's element through parentRenderObjectElement; the chain is walked until an element turns up, because a fragment renders into a DocumentFragment. The template path is kept for when there is no element to parse against, which is a fragment at the root of a component tree.

Parsing against an element also settles markup that is only valid inside a specific parent, such as a <td> in a <tr>.

raw_text_web.dart is identical on next, so this applies there unchanged.

Type of Change

• 🛠️ Bug fix

Tests

packages/jaspr/test/dom/html/raw_text_browser_test.dart, five cases:

• html is unchanged and stays in the xhtml namespace
• an svg fragment (<circle>) comes out in the svg namespace
• a nested fragment (<g> with a child) keeps the namespace all the way down
• hydrating over the server's markup leaves one svg circle, not a broken replacement
• a full <svg> element inside html still works, which the html parser already handled — there to catch a fix that special-cases the namespace too eagerly

The two svg fragment cases and the hydration case fail before the change and pass after. dart test -p chrome and dart test -p vm are green in packages/jaspr.

Fixes #567