Support for XML namespace prefixes in DOM Element names / tagnames (XHTML, SVG, MathML), with proposed fix

[danielweck]

finder/finder.ts

Lines 220 to 229 in feef199

	function tagName(input: Element): Knot | null {
	const name = input.tagName.toLowerCase()
	if (config.tagName(name)) {
	return {
	name,
	penalty: 2,
	}
	}
	return null
	}

My current workaround is:

{
name: name.replace(/^(.+:)(.+)$/, "*|$2"),
}

Examples:

• m:math ==> *|math
• svg:a ==> *|a
• div ==> div

Unfortunately the wildcard * prefix is necessary because the querySelector() API does not support namespace prefixes, unlike CSS stylesheets:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a

...consequently, for example *|a will match not only SVG link elements but also HTML hyperlinks! :(

https://www.w3.org/TR/selectors-api/#namespace-prefix-needs-to-be-resolved

[danielweck]

Follow-up, I've added name._____.replace(/^\*\|(a|script|style)$/, "*|$1:not(|$1)") to exclude HTML elements with the same name as namespace-prefixed SVG element names (could be extended to other common names, and MathML too...)