bug: boolean attributes in form-associated components parsed wrongly

[annam002]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.35.1

Current Behavior

I am trying to upgrade to Stencil 4.35.1 from Stencil 4.23.0. In components that are form-associated the boolean properties now behave differently than before. They cannot be set to false anymore by using the property.
In a component like below, the checkbox cannot be set to disabled by the user of the web component anymore. This was working fine in Stencil 4.23.0.

The component:

@Component({
  tag: 'test-checkbox-form-associated',
  shadow: true,
  formAssociated: true,
})
export class TestCheckboxFormAssociated {
  @AttachInternals() internals: ElementInternals;

  @Prop() disabled: boolean | undefined = undefined;

  componentWillLoad() {
    if ('setFormValue' in this.internals) this.internals.setFormValue('');
  }

  render() {
    return (
      <label>
        <input type="checkbox" disabled={this.disabled} /> checkbox
      </label>
    );
  }
}

When using it with
<test-checkbox-form-associated disabled="false"></test-checkbox-form-associated>

this results in this HTML

<input type="checkbox" disabled="">

Expected Behavior

It works like before.

System Info

Stencil: 4.35.1 🦄
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

check out example repo and do npm run start

Code Reproduction URL

https://github.com/annam002/stencil-properties-bug

Additional Information

No response

[annam002]

Was probably introduced with this PR: #6280

[danyball]

This is not a bug, its a feature! You can read that in the html standard. Also see #5461

[annam002]

From what I understand, you changed the behaviour to be compliant to the HTML standard. But this is a breaking change: users of our components now have to change from setting disabled="false" to removing the disabled-attribute. And if you want to comply to the standard, why do you only do it to form-associated components? they now behave differently than non-form-associated ones, which is wildly confusing.

[christian-bromann]

<test-checkbox-form-associated disabled="false"></test-checkbox-form-associated>

Setting disabled="false" is the same as setting disabled="true". The fact that Stencil allowed to set negative boolean flags as properties has been a bug and we should clean this up.

[johnjenkins]

Out of interest (genuine question) - if you removed the ability of Stencil to set bool=“false” how would one set a boolean (via attribute) whose default is “true” which does not necessarily reflect?
I realise the standard says “you just can’t” but is that acceptable?
Plus I think I’m right in saying that the standard doesn’t seem consistent regarding aria attributes?

[christian-bromann]

how would one set a boolean (via attribute) whose default is “true” which does not necessarily reflect?

I would advocate for a best practice where you would use a negation attribute, e.g.

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Prop() myBool = true;
  // ...
}

to set it to false, you would just do <my-component no-my-bool />. This could be something that Stencil could do automatically.

Thoughts?

[annam002]

The point is that you cannot set the property to false like before and this is a breaking change. We cannot upgrade now because it would break things for our users.
What I also don't understand: why was this behaviour only changed for form-associated components and not in general for all boolean properties?

[christian-bromann]

@danyball any thoughts here?