Lock down attribute name and property name patterns.

[theengineear]

Attributes

HTML attributes are case-insensitive. There is no reason to support uppercase letters. We can support lowercase, alphanumeric, and hyphens. However, we should consider restricting leading / trailing hyphens and leading digits.

// accepted
html`<div foo="${bar}"></div>`
html`<div f-o-o="${bar}"></div>`
html`<div f00="${bar}"></div>`

// rejected
html`<div 1foo="${bar}"></div>`  // leading digit
html`<div f_o_o="${bar}"></div>` // characters other than “[a-z0-9-]”
html`<div -foo="${bar}"></div>`  // leading hyphen
html`<div foo-="${bar}"></div>`  // trailing hyphen

Properties

There is no such think in HTML as “properties” — they are completely provided by our DSL. However, we can look to the specification for valid variable names and common conventions to guide us. Property names should only contain alphanumeric characters (uppercase is ok) and underscores, but leading / trailing underscores should be forbidden, leading digits should not be allowed, and leading uppercase letters should not be allowed.

// accepted
html`<div .foo="${bar}"></div>`
html`<div .fOo="${bar}"></div>`
html`<div .f_o_o="${bar}"></div>`
html`<div .f00="${bar}"></div>`

// rejected
html`<div .1foo="${bar}"></div>`  // leading digit
html`<div .f-o-o="${bar}"></div>` // characters other than “[a-zA-Z0-9_]”
html`<div .Foo="${bar}"></div>`   // leading uppercase character
html`<div ._foo="${bar}"></div>`  // leading underscore
html`<div .foo_="${bar}"></div>`  // trailing underscore

Context

I recently went to port some code that was using a property like _internal, and that cannot be bound via ._internal="${whatever}". At first, I thought it would be better to allow it… but then I thought… it’s really not internal, it’s on the public interface. I am waffling a bit on how restrictive / flexible to be here.