[lit-html] Detect duplicate attributes in DEV_MODE

[filimon-danopoulos-stratsys]

Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

When a property is accidentally duplicated it is perceived that Lit silently "fails". It would be nice to get a warning about this in DEV_MODE as it can lead to obscure bugs that are hard to track down otherwise.

See the full discussion from Discord here: https://discord.com/channels/1012791295170859069/1149635522646515774

Here is a small case where I would like to get a warning: https://lit.dev/playground/#gist=932be48698b63a7b9d38a78b75a8a3ef

When the template looks like this:

<textarea 
      ?disabled=${this.disabled} 
      ?disabled=${this.disabled} 
      placeholder=${this.placeholder}
></textarea>

Not sure if an explanation is necessary but the placeholder will not render properly as the duplicate properties are removed by the <template> resulting in a discrepancy between parts and values. Thomas Boyer explained it well in the attached Discord thread.

If the template is large, with event handlers, classMap and styleMap, a single duplicate line can be really hard to track down and is unintuitive as the cause of the resulting bug. A message like > Possible duplicate attribute detected. would be very helpful. Ideally with some way to identify where said duplication might exist.

Alternatives and Workarounds

This could also be solved by expanded editor support where heavier analysis can be done during development.