Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Properly set boolean attributes on custom elements #6073

Merged
merged 1 commit into from
Apr 30, 2021

Conversation

geoffrich
Copy link
Member

Fixes #5951

When given a standalone boolean attribute on a custom element, the compiler was setting the corresponding property to empty string, which is falsy. This made it seem as the property was not being applied.

For example, using the following in a Svelte template sets the raised property of the mwc-button custom element to ''. Instead, it should be set to true.

<mwc-button raised />

With this change, the compiler will set boolean properties on custom elements to true when no value is provided.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

@geoffrich geoffrich changed the title Fix boolean attributes on custom elements (#5951) Properly set boolean attributes on custom elements Mar 11, 2021
@vospascal
Copy link

vospascal commented Jul 1, 2021

@geoffrich nice work, is this already released? (ah i see in 3.38)
also one more question if you look at https://github.com/webcomponents/custom-elements-everywhere/blob/master/libraries/svelte/src/components/ComponentWithProperties.svelte
this is from svelte to webcomponents, wouldnt it be nice to also support somehow the pasing of array and object properties?
This would make the svelte custom-elements work with other things nicely

@vospascal
Copy link

vospascal commented Jul 1, 2021

@tanhauhau could svelte support something like this ?
https://lit-element.polymer-project.org/guide/properties

LitElement has a default converter which handles String, Number, Boolean, Array, and Object property types.

prop1: { type: String },
prop2: { type: Number },
prop3: { type: Boolean },
prop4: { type: Array },
prop5: { type: Object }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

MWC attribute without value is discarded in Svelte
4 participants