How to associate an attribute (kebab-case) and a property (camelCase)

[pabloalmunia]

This is the principal coment:

/**
 *
 * The web component `<gy-padlock></gy-padlock>` displays a padlock icon with two
 * status: lock (`value=false`) and unlock (`value=true`)
 *
 * @element gy-padlock
 *
 * @attribute  value                  -  component value, by default must be 'true' (unlock) or 'false' (lock)
 * @property   value                  -  component value, by default must be 'true' (unlock) or 'false' (lock)
 * @attribute  [lock-value=false]     -  define the value for lock status (reflected in lockValue property))
 * @property   [lockValue=false]      -  define the value for lock status (reflection of lock-value attribute)
 * @attribute  [unlock-value=true]    -  define the value for unlock status (reflected in unlockValue property))
 * @property   [unlockValue=true]     -  define the value for unlock status (reflection of unlock-value attribute)
 *
 */

Since "value" has the same name as "attribute" and "property", the relationship is very clear.

But, the attribute lock-value has as property lockValue, and the attribute unlock-value has as property unlockValue. This conversion from kebab-case to camelCase prevents the identification that both elements are related.

How to associate an attribute (kebak-case) and a property(camelCase)?

[AMerkuri]

I would propose following syntax to parse: @property {boolean} [lockValue=false] @attr lock-value - lock status or @property {boolean} [lockValue=false] @attribute lock-value - lock status