textarea [type_ "text"] [] blows up Elm

[simonh1000]

create a program with

view = 
    textarea [type_ "text", value "hello world"] []

Uncaught TypeError: Cannot set property type of # which has only a getter

[lydell]

Note: This only happens in JavaScript’s strict mode. Elm outputs 'use strict'; near the top. Took me a while to figure out – hope this saves someone time in the future.

Edit: I also tried to find all readonly properties.

I went to https://html.spec.whatwg.org/ (warning: massive page) and ran this JavaScript in the console:

Array.from(document.querySelectorAll("pre > code.idl"), e => { const text = e.textContent; const match = /interface (HTML\w*Element) /.exec(text); if (match === null) return undefined; const r = Array.from(text.matchAll(/(readonly .+) (\w+);/g)); return r.length === 0 ? undefined : [match[1], r] }).filter(Boolean).sort((a, b) => a[0].localeCompare(b[0])).map(([name, attrs]) => `${name}\n${attrs.map(a => `${a[2]} (${a[1]})`).join("\n")}`).join("\n\n")

This is the result:

HTMLAnchorElement
relList (readonly attribute DOMTokenList)

HTMLAreaElement
relList (readonly attribute DOMTokenList)

HTMLButtonElement
form (readonly attribute HTMLFormElement?)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)
labels (readonly attribute NodeList)

HTMLDataListElement
options (readonly attribute HTMLCollection)

HTMLElement
accessKeyLabel (readonly attribute DOMString)

HTMLFieldSetElement
form (readonly attribute HTMLFormElement?)
type (readonly attribute DOMString)
elements (readonly attribute HTMLCollection)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)

HTMLFormElement
relList (readonly attribute DOMTokenList)
elements (readonly attribute HTMLFormControlsCollection)
length (readonly attribute unsigned long)

HTMLFrameElement
contentDocument (readonly attribute Document?)
contentWindow (readonly attribute WindowProxy?)

HTMLIFrameElement
sandbox (readonly attribute DOMTokenList)
contentDocument (readonly attribute Document?)
contentWindow (readonly attribute WindowProxy?)

HTMLImageElement
naturalWidth (readonly attribute unsigned long)
naturalHeight (readonly attribute unsigned long)
complete (readonly attribute boolean)
currentSrc (readonly attribute USVString)

HTMLInputElement
form (readonly attribute HTMLFormElement?)
list (readonly attribute HTMLElement?)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)
labels (readonly attribute NodeList?)

HTMLLabelElement
form (readonly attribute HTMLFormElement?)
control (readonly attribute HTMLElement?)

HTMLLegendElement
form (readonly attribute HTMLFormElement?)

HTMLLinkElement
relList (readonly attribute DOMTokenList)
sizes (readonly attribute DOMTokenList)

HTMLMapElement
areas (readonly attribute HTMLCollection)

HTMLMediaElement
error (readonly attribute MediaError?)
currentSrc (readonly attribute USVString)
networkState (readonly attribute unsigned short)
buffered (readonly attribute TimeRanges)
readyState (readonly attribute unsigned short)
seeking (readonly attribute boolean)
duration (readonly attribute unrestricted double)
paused (readonly attribute boolean)
played (readonly attribute TimeRanges)
seekable (readonly attribute TimeRanges)
ended (readonly attribute boolean)
audioTracks (readonly attribute AudioTrackList)
videoTracks (readonly attribute VideoTrackList)
textTracks (readonly attribute TextTrackList)

HTMLMeterElement
labels (readonly attribute NodeList)

HTMLObjectElement
form (readonly attribute HTMLFormElement?)
contentDocument (readonly attribute Document?)
contentWindow (readonly attribute WindowProxy?)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)

HTMLOptionElement
form (readonly attribute HTMLFormElement?)
index (readonly attribute long)

HTMLOutputElement
htmlFor (readonly attribute DOMTokenList)
form (readonly attribute HTMLFormElement?)
type (readonly attribute DOMString)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)
labels (readonly attribute NodeList)

HTMLProgressElement
position (readonly attribute double)
labels (readonly attribute NodeList)

HTMLSelectElement
form (readonly attribute HTMLFormElement?)
type (readonly attribute DOMString)
options (readonly attribute HTMLOptionsCollection)
selectedOptions (readonly attribute HTMLCollection)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)
labels (readonly attribute NodeList)

HTMLTableCellElement
cellIndex (readonly attribute long)

HTMLTableElement
tBodies (readonly attribute HTMLCollection)
rows (readonly attribute HTMLCollection)

HTMLTableRowElement
rowIndex (readonly attribute long)
sectionRowIndex (readonly attribute long)
cells (readonly attribute HTMLCollection)

HTMLTableSectionElement
rows (readonly attribute HTMLCollection)

HTMLTemplateElement
content (readonly attribute DocumentFragment)

HTMLTextAreaElement
form (readonly attribute HTMLFormElement?)
type (readonly attribute DOMString)
textLength (readonly attribute unsigned long)
willValidate (readonly attribute boolean)
validity (readonly attribute ValidityState)
validationMessage (readonly attribute DOMString)
labels (readonly attribute NodeList)

HTMLTrackElement
readyState (readonly attribute unsigned short)
track (readonly attribute TextTrack)

HTMLVideoElement
videoWidth (readonly attribute unsigned long)
videoHeight (readonly attribute unsigned long)

• Preact seems to use a try-catch to silence errors: https://github.com/preactjs/preact/blob/139a8625f31fa6aa53c8e74e10045f603ca9c180/src/diff/props.js#L117-L121
• React almost exclusively uses .setAttribute() instead of setting properties: https://github.com/facebook/react/blob/9198a5cec0936a21a5ba194a22fcbac03eba5d1d/packages/react-dom/src/shared/DOMProperty.js#L360-L383 (code for setting stuff: https://github.com/facebook/react/blob/9198a5cec0936a21a5ba194a22fcbac03eba5d1d/packages/react-dom/src/client/DOMPropertyOperations.js#L150-L176)