fix: align @attr boolean mode with native HTML boolean attribute semantics#7514
Open
janechu wants to merge 2 commits into
Open
Conversation
06780cc to
b42ce21
Compare
… FASTElement matches browser implementation
b42ce21 to
2c30ccf
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
📖 Description
Aligns
@attr({ mode: "boolean" })andbooleanConverterwith native HTML boolean attribute semantics (e.g.,disabled,required):setAttribute(name, anyString)(including""and"false") sets the property totrue; onlyremoveAttribute(name)makes itfalse.Boolean()coercion: any truthy value adds the attribute (with value""); any falsy value removes it.The headline behavior change is that
<my-element my-bool="false">now resolves toelement.myBool === true, matching<input disabled="false">still being disabled.Changes
booleanConverter.fromView→!!value(standardBoolean()coercion).booleanConverter.toView→value ? "" : null(HTML-standard boolean-attribute output; previously"true"/"false").AttributeDefinition.onAttributeChangedCallbackspecial-casesmode: "boolean"to callsetValue(element, value !== null), ensuring the attribute → property path is presence-based even when the converter would otherwise coerce""tofalse.This is a breaking change included in the 3.x release.
🎫 Issues
Closes #7511
👩💻 Reviewer Notes
mode: "boolean"reflection path no longer routes throughbooleanConverter.toView()/booleanConverter.fromView(). These methods still apply to property assignment (el.bool = XrunsfromView), explicit calls (booleanConverter.fromView(x)), andbooleanConverterpaired withmode: "reflect"(which callstoView).mode: "boolean"will receive aboolean(fromvalue !== null) on the attribute → property path rather than the raw attribute string, since boolean mode now means "presence-based" regardless of the converter.packages/fast-element/MIGRATION.mdandsites/website/src/docs/3.x/migration-guide.md.📑 Test Plan
Added side-by-side parity tests in
packages/fast-element/src/components/attributes.pw.spec.tsthat exercise both a FASTmode: "boolean"custom element and a native<button disabled>for every false/true case, asserting they report identical state in both reflection directions.@microsoft/fast-elementchromium suite passes (no regressions).npm run biome:check,npm run checkchangepass.✅ Checklist
General
$ npm run change