only set attributes via properties when truly necessary (#1434)

src/compiler/compile/render-dom/wrappers/Element/Attribute.ts

@@ -224,79 +224,20 @@ export default class AttributeWrapper {
 	}
 }
 
-// source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+// source: https://html.spec.whatwg.org/multipage/indices.html
 const attribute_lookup = {
-	accept: { applies_to: ['form', 'input'] },
-	'accept-charset': { property_name: 'acceptCharset', applies_to: ['form'] },
-	accesskey: { property_name: 'accessKey' },
-	action: { applies_to: ['form'] },
-	align: {
-		applies_to: [
-			'applet',
-			'caption',
-			'col',
-			'colgroup',
-			'hr',
-			'iframe',
-			'img',
-			'table',
-			'tbody',
-			'td',
-			'tfoot',
-			'th',
-			'thead',
-			'tr',
-		],
-	},
 	allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] },
-	alt: { applies_to: ['applet', 'area', 'img', 'input'] },
+	allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] },
 	async: { applies_to: ['script'] },
-	autocomplete: { applies_to: ['form', 'input'] },
 	autofocus: { applies_to: ['button', 'input', 'keygen', 'select', 'textarea'] },
 	autoplay: { applies_to: ['audio', 'video'] },
-	autosave: { applies_to: ['input'] },
+	checked: { applies_to: ['input'] },
-	bgcolor: {
-		property_name: 'bgColor',
-		applies_to: [
-			'body',
-			'col',
-			'colgroup',
-			'marquee',
-			'table',
-			'tbody',
-			'tfoot',
-			'td',
-			'th',
-			'tr',
-		],
-	},
-	border: { applies_to: ['img', 'object', 'table'] },
-	buffered: { applies_to: ['audio', 'video'] },
-	challenge: { applies_to: ['keygen'] },
-	charset: { applies_to: ['meta', 'script'] },
-	checked: { applies_to: ['command', 'input'] },
-	cite: { applies_to: ['blockquote', 'del', 'ins', 'q'] },
-	class: { property_name: 'className' },
-	code: { applies_to: ['applet'] },
-	codebase: { property_name: 'codeBase', applies_to: ['applet'] },
-	color: { applies_to: ['basefont', 'font', 'hr'] },
-	cols: { applies_to: ['textarea'] },
-	colspan: { property_name: 'colSpan', applies_to: ['td', 'th'] },
-	content: { applies_to: ['meta'] },
-	contenteditable: { property_name: 'contentEditable' },
-	contextmenu: {},
 	controls: { applies_to: ['audio', 'video'] },
-	coords: { applies_to: ['area'] },
-	data: { applies_to: ['object'] },
-	datetime: { property_name: 'dateTime', applies_to: ['del', 'ins', 'time'] },
 	default: { applies_to: ['track'] },
 	defer: { applies_to: ['script'] },
-	dir: {},
-	dirname: { property_name: 'dirName', applies_to: ['input', 'textarea'] },
 	disabled: {
 		applies_to: [
 			'button',
-			'command',
 			'fieldset',
 			'input',
 			'keygen',
@@ -306,119 +247,21 @@ const attribute_lookup = {
 			'textarea',
 		],
 	},
-	download: { applies_to: ['a', 'area'] },
+	formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] },
-	draggable: {},
-	dropzone: {},
-	enctype: { applies_to: ['form'] },
-	for: { property_name: 'htmlFor', applies_to: ['label', 'output'] },
-	formaction: { applies_to: ['input', 'button'] },
-	headers: { applies_to: ['td', 'th'] },
-	height: {
-		applies_to: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
 	hidden: {},
-	high: { applies_to: ['meter'] },
-	href: { applies_to: ['a', 'area', 'base', 'link'] },
-	hreflang: { applies_to: ['a', 'area', 'link'] },
-	'http-equiv': { property_name: 'httpEquiv', applies_to: ['meta'] },
-	icon: { applies_to: ['command'] },
-	id: {},
 	indeterminate: { applies_to: ['input'] },
 	ismap: { property_name: 'isMap', applies_to: ['img'] },
-	itemprop: {},
+	loop: { applies_to: ['audio', 'bgsound', 'video'] },
-	keytype: { applies_to: ['keygen'] },
-	kind: { applies_to: ['track'] },
-	label: { applies_to: ['track'] },
-	lang: {},
-	language: { applies_to: ['script'] },
-	loop: { applies_to: ['audio', 'bgsound', 'marquee', 'video'] },
-	low: { applies_to: ['meter'] },
-	manifest: { applies_to: ['html'] },
-	max: { applies_to: ['input', 'meter', 'progress'] },
-	maxlength: { property_name: 'maxLength', applies_to: ['input', 'textarea'] },
-	media: { applies_to: ['a', 'area', 'link', 'source', 'style'] },
-	method: { applies_to: ['form'] },
-	min: { applies_to: ['input', 'meter'] },
 	multiple: { applies_to: ['input', 'select'] },
 	muted: { applies_to: ['audio', 'video'] },
-	name: {
+	nomodule: { property_name: 'noModule', applies_to: ['script'] },
-		applies_to: [
-			'button',
-			'form',
-			'fieldset',
-			'iframe',
-			'input',
-			'keygen',
-			'object',
-			'output',
-			'select',
-			'textarea',
-			'map',
-			'meta',
-			'param',
-		],
-	},
 	novalidate: { property_name: 'noValidate', applies_to: ['form'] },
-	open: { applies_to: ['details'] },
+	open: { applies_to: ['details', 'dialog'] },
-	optimum: { applies_to: ['meter'] },
+	playsinline: { property_name: 'playsInline', applies_to: ['video'] },
-	pattern: { applies_to: ['input'] },
-	ping: { applies_to: ['a', 'area'] },
-	placeholder: { applies_to: ['input', 'textarea'] },
-	poster: { applies_to: ['video'] },
-	preload: { applies_to: ['audio', 'video'] },
-	radiogroup: { applies_to: ['command'] },
 	readonly: { property_name: 'readOnly', applies_to: ['input', 'textarea'] },
-	rel: { applies_to: ['a', 'area', 'link'] },
 	required: { applies_to: ['input', 'select', 'textarea'] },
 	reversed: { applies_to: ['ol'] },
-	rows: { applies_to: ['textarea'] },
-	rowspan: { property_name: 'rowSpan', applies_to: ['td', 'th'] },
-	sandbox: { applies_to: ['iframe'] },
-	scope: { applies_to: ['th'] },
-	scoped: { applies_to: ['style'] },
-	seamless: { applies_to: ['iframe'] },
 	selected: { applies_to: ['option'] },
-	shape: { applies_to: ['a', 'area'] },
-	size: { applies_to: ['input', 'select'] },
-	sizes: { applies_to: ['link', 'img', 'source'] },
-	span: { applies_to: ['col', 'colgroup'] },
-	spellcheck: {},
-	src: {
-		applies_to: [
-			'audio',
-			'embed',
-			'iframe',
-			'img',
-			'input',
-			'script',
-			'source',
-			'track',
-			'video',
-		],
-	},
-	srcdoc: { applies_to: ['iframe'] },
-	srclang: { applies_to: ['track'] },
-	srcset: { applies_to: ['img'] },
-	start: { applies_to: ['ol'] },
-	step: { applies_to: ['input'] },
-	style: { property_name: 'style.cssText' },
-	summary: { applies_to: ['table'] },
-	tabindex: { property_name: 'tabIndex' },
-	target: { applies_to: ['a', 'area', 'base', 'form'] },
-	title: {},
-	type: {
-		applies_to: [
-			'button',
-			'command',
-			'embed',
-			'object',
-			'script',
-			'source',
-			'style',
-			'menu',
-		],
-	},
-	usemap: { property_name: 'useMap', applies_to: ['img', 'input', 'object'] },
 	value: {
 		applies_to: [
 			'button',
@@ -432,12 +275,6 @@ const attribute_lookup = {
 			'textarea',
 		],
 	},
-	volume: { applies_to: ['audio', 'video'] },
-	playbackRate: { applies_to: ['audio', 'video'] },
-	width: {
-		applies_to: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
-	wrap: { applies_to: ['textarea'] },
 };
 
 Object.keys(attribute_lookup).forEach(name => {