Attributes as Properties

The problem

With proposal #14, all values defined in template will be applied to elements as props:

<template>
    <!-- title is set via div.title = 'hello' -->
    <div title="hello"></div>
</template>

According to the HTML template spec and LWC conventions, all attributes must be lowercased. This means that the following will throw a parse error:

<template>
    <div tabIndex="hello"></div>
    <!-- error -->
</template>

How then does the compiler know to set tabindex as tabIndex on the element?

Proposal

<template>
    <!-- tabindex value is set via div.tabIndex = '1'. Need to map to camelCase -->
    <div tabindex="1"></div>

    <!-- max value is set via input.maxValue = '100'. -->
    <input maxvalue="100">

    <!-- max value is set via input.maxValue = '100'. -->
    <my-custom-input maxvalue="100"></my-custom-input>
</template>
import { LightningElement } from 'lwc';

class MyCustomElement extends LightningElement {
    // runtime warning stating that tabindex setter will never be called by the template. Consider renaming.
    @api set tabindex(value) {

    }
}

Gotchas

Pros

Cons

undefined