[SSR/template-compiler] Align draggable with spellcheck [potentially breaking]

[nolanlawson]

Currently we do a lot of special munging for the spellcheck attribute:

lwc/packages/@lwc/template-compiler/src/codegen/index.ts

Lines 445 to 448 in 574ffbd

	// `spellcheck` string values are specially handled to massage them into booleans.
	if (attrName === 'spellcheck') {
	return t.literal(attrValue.value.toLowerCase() !== 'false');
	}

Arguably we should do the same thing for draggable since, in terms of IDL reflection, it works the same as spellcheck but with a different default:

const div = document.createElement('div')
div.spellcheck // true
div.draggable // false

Table of setAttribute values and what you get from the property afterwards:

spellcheck:

Value	Result
""	true
"false"	false
"true"	true
"FALSE"	false
"TRUE"	true
"yolo"	true

draggable:

Value	Result
""	false
"false"	false
"true"	true
"FALSE"	false
"TRUE"	true
"yolo"	false

Test script:

function test(name) {
    const results = []
    for (const value of ['', 'false', 'true', 'FALSE', 'TRUE', 'yolo']) {
        div.setAttribute(name, value)
        results[JSON.stringify(value)] = div[name]
    }
    console.table(results)
}