bug: setAttribute with empty string on boolean attribute resolves to false instead of true #6411
Description
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.38.0
Current Behavior
When I call "setAttribute" with the value of an empty string on a stencil component for a boolean attribute, it resolves to false. In version 4.37.1 it resolved to true, and this would be in accordance with the HTML spec.
Seems to be caused by this change: #6404
Expected Behavior
It should work like before.
System Info
Steps to Reproduce
Component:
@Component({
tag: 'my-component',
shadow: true,
})
export class MyComponent {
@Prop() checked: boolean = false;
render() {
return <div>I'm {this.checked ? 'checked' : 'not checked'}</div>;
}
}
HTML:
<body>
<my-component></my-component>
<button>Check</button>
</body>
<script>
document.querySelector('button').addEventListener('click', () => {
document.querySelector('my-component').setAttribute('checked', '');
});
</script>
With Stencil version 4.37.1, clicking the button toggles the checked attribute. With version 4.38.0 it doesn't.
Code Reproduction URL
Can be reproduced with the given example
Additional Information
No response