Amphtml: amp-state ids collide with reserved words when called from amp-list template

[radiovisual]

What's the issue?

amp-state ids collide with reserved words when called from amp-list template

How do we reproduce the issue?

1. Create an amp-state with an id of formData
2. Attempt to do anything that calls AMP.setState on formData from within an amp-list and template component

👉 Bug Demo Here

What browsers are affected?

Only tested in Chrome and Safari

Which AMP version is affected?

1516833286380

[radiovisual]

per Sebastian's request: @sebastianbenz

[sebastianbenz]

//cc @choumx

[choumx]

Oh this is interesting. Actually it's being sanitized by amp-list due to the presence of the substring data: in the value of the on attribute:

<button role="button" class="button inactive" [class]="FormData.on ? 'button active' : 'button inactive' " on="tap:AMP.setState({FormData: { on: !FormData.on }})">Toggle Me</button>

There's ongoing work to improve the predictability of the amp-list sanitizer. We should add a warning or error when something is sanitized by amp-list in the meantime.

/cc @aghassemi

[choumx]

This is where the on attribute gets stripped (and where we should add a user warning/error): https://github.com/ampproject/amphtml/blob/0cef5ae4ca934faa212fd09a485519430dbf6499/src/sanitizer.js#L380-L387

You can check the element inspector of Chrome devtools to see.

[sebastianbenz]

Thanks @choumx for looking into this. Warning/error on console would be great - this is super frustrating to debug otherwise.