Move HTML/ARIA property/attribute reflection from ssr-compiler to ssr-runtime

[nolanlawson]

Right now the property/attribute reflection in the ssr- packages is a bit hairy. I don't think that we need to sniff at runtime which props are present in the component (title, ariaLabel, etc.) – we can just move the known lists of global HTML props / ARIA props to ssr-runtime and put them all on a shared prototype (or similar mechanism). This will simplify the SSR compiler code quite a bit.

Another small bug: calling

this.ariaLabel = undefined
this.title = undefined

(etc)

should result in the corresponding attributes being removed, same as setting null. This is just how HTML IDL attribute reflection works. Currently this is busted for ARIA properties because @lwc/aria-reflection doesn't handle undefined correctly for backwards compat.

[git2gus]

This issue has been linked to a new work item: W-16985169

[wjhsf]

Interestingly, null / undefined remove ARIA attributes, but not global HTML attributes.

const div = document.createElement('div')
// <div></div>

div.ariaLabel = div.title = 'foo'
// <div aria-label="foo" title="foo"></div>

div.ariaLabel = div.title = null
// <div title="null"></div>

[nolanlawson]

I think it varies from attribute to attribute. E.g. setting tabIndex to undefined actually gives you tabindex="0". There are also inconsistencies between browsers:

lwc/packages/@lwc/integration-karma/test/component/html-properties/index.spec.js

Lines 133 to 136 in 6d0296b

	case 'tabIndex':
	// For spellcheck, Firefox returns false, Chrome/Safari returns true
	// For tabIndex, IE11 returns 0 and the others return -1
	return document.createElement('div')[propName];

[wjhsf]

I think it varies from attribute to attribute. E.g. setting tabIndex to undefined actually gives you tabindex="0". There are also inconsistencies between browsers:

That's variation on the value, not variation on removal.

const div = document.createElement('div')
// <div></div>

div.ariaLabel = div.title = div.spellcheck = div.tabIndex = 'foo'
// <div aria-label="foo" title="foo" spellcheck="true" tabindex="0"></div>

div.ariaLabel = div.title = div.spellcheck = div.tabIndex = null
div.hasAttribute('aria-label') // false
div.hasAttribute('title') // true
div.hasAttribute('spellcheck') // true
div.hasAttribute('tabindex') // true