LWC @api boolean attribute issue

Question

I am trying to pass value to a public boolean property in a web component from a parent lwc. Child JS definition:

  export default class GsdDseUserProfilePicture extends LightningElement {
     @api userRecordId;
     @api circular = false;
     @api readonly = false;

Parent html:

<c-gsd-dse-user-profile-picture user-record-id={userRecord.id} width="150px" height="150px" circular readonly>

But when I am printing the value in console in a function:

    get showCameraIcon() {
      var showIcon = false;
      console.log("TCL: getshowCameraIcon -> showIcon", showIcon);
      console.log("TCL: getshowCameraIcon -> this.readOnly", this.readonly);
      if (this.readonly === false) {
       showIcon = true;
      }
      console.log("TCL: getshowCameraIcon -> showIcon", showIcon);
      return showIcon;   
}

I always get false in logs for this.readonly property. Weird part is that I get the correct value of circular property. Since, these are @api marked properies, so there is no chance that these values can change later on in child component.

Answer 1

This is one of those weird bugs found in Salesforce!.

I just tried changing it to readOnly and used read-only in HTML, Also used readonlyicon. In short any other variable except readonly seems to work!

---

I am getting below error when using readonly:

And in fact there is no readOnly anywhere. I guess LWC is internally using readonly.

------ ADDED ----------

This is actually not a bug. readonly is global HTML attribute. Same is the case with other global attributes like bgcolor, colspan, datetime etc. So, we should be using camel casing for them as documented in LWC. This is the reference.