How do I set camel case attributes in Dart Web UI?

Question

I have a Dart Web UI class like this:

class PersonComponent extends WebComponent {
  bool loggedIn;
  String name;
}

and I'm using it like this:

<x-person loggedIn="{{loggedIn}}"></x-person>

However, when I run the app, I get a NoSuchMethodError, because it can't find loggedin=

How do I set a camel case attribute name in a Web UI class?

Answer 1

It turns out that HTML attributes are always lowercase, so Dart Web UI will convert loggedIn to loggedin.

To use camel case, you must use logged-in as an attribute.

Here is an example:

<x-person logged-in="{{loggedIn}}"></x-person>