MWC attribute without value is discarded in Svelte

[duongdominhchau]

Description

When I use Material Web Components with Svelte, attributes without value are discarded and thus result in incorrectly styled element. I guess because they are unknown attributes so the default value for them is undefined and thus were removed under the rule "no nullish". Is there a way to keep these attributes as-is, or I have to wrap them inside Svelte component and export the boolean properties corresponding to these attributes?

How to reproduce

npx degit sveltejs/template example-project
cd example-project
npm i
npm add svelte@latest
npm add @material/mwc-button

Change the content of App.svelte to

<script>
  import '@material/mwc-button';
</script>

<main>
  <mwc-button raised label="Hello"/>
  <mwc-button raised=y label="Hello"/>
</main>

then run with

npm run dev

Other information

• Svelte version: 3.32.1
• I use Rollup (from the project template)

[geoffrich]

I reproed the issue in a REPL here: https://svelte.dev/repl/8de59adf20e2424d8124cd9f6a2ff700?version=3.32.1.

I've also noticed this issue in the past with other custom element libraries. When in a Svelte context, you have to set boolean attributes on custom elements to a truthy value (e.g. <mwc-button raised=true>) to get them to apply. In a raw HTML context (e.g. the MWC demo page), you can simply add the attribute without setting a value (<mwc-button raised>).

This doesn't happen with native HTML elements -- <button disabled> works just fine inside of Svelte.

[Conduitry]

This should be fixed now in 3.38.0.