Skip to content

feat: remove JS backed API's for attributes which are solely presentational - #36808

Open
Chris Holt (chrisdholt) wants to merge 25 commits into
microsoft:masterfrom
chrisdholt:users/chhol/remove-js-api-for-presentational-attributes
Open

Chris Holt (chrisdholt) wants to merge 25 commits into
microsoft:masterfrom
chrisdholt:users/chhol/remove-js-api-for-presentational-attributes

Conversation

@chrisdholt

Copy link
Copy Markdown
Member

Description

This PR converts CSS-only presentational attributes across Web Components from JavaScript fields to HTML-only attributes.

Benefits

  • Removes unnecessary JavaScript fields and attribute observation.
  • Reduces the runtime API surface and property synchronization logic.
  • Preserves existing CSS attribute selectors and generated API metadata.

Migration

Set presentational values using HTML attributes instead of JavaScript properties. Consumers who cannot apply attributes declaratively in HTML can still use JavaScript for attribute assignment via setAttribute(), removeAttribute(), or toggleAttribute().

// Before
element.appearance = 'primary';
element.iconOnly = true;

// After
element.setAttribute('appearance', 'primary');
element.setAttribute('icon-only', '');

@chrisdholt
Chris Holt (chrisdholt) force-pushed the users/chhol/remove-js-api-for-presentational-attributes branch from 21ec2b3 to 0236d3f Compare September 29, 2026 17:32
@github-actions

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,6 @@
{

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/Divider 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Divider.Inset.normal.chromium.png 2 Changed
vr-tests-web-components/Label 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Label. - Dark Mode.normal.chromium_1.png 171 Changed
vr-tests-web-components/Label.Disabled.normal.chromium.png 116 Changed
vr-tests-web-components/Text 9 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Text.Nowrap.normal.chromium.png 6094 Changed
vr-tests-web-components/Text.Strikethrough.normal.chromium.png 209 Changed
vr-tests-web-components/Text.Block.normal.chromium.png 6296 Changed
vr-tests-web-components/Text.Underline.normal.chromium.png 265 Changed
vr-tests-web-components/Text.Truncate.normal.chromium.png 5819 Changed
vr-tests-web-components/Text.Weight.normal.chromium.png 12958 Changed
vr-tests-web-components/Text.Italic.normal.chromium.png 155 Changed
vr-tests-web-components/Text.Font.normal.chromium.png 6452 Changed
vr-tests-web-components/Text.Size.normal.chromium.png 70284 Changed

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟥  🟥  🟥  🟥  ⬜ Love seeing all this red!

Left an optional comment on the Accordion Header changes but otherwise pretty straight forward.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants