Skip to content

Boolean Attributes Treated Inconsistently #14553

@fweth

Description

@fweth

Astro Info

Astro                    v5.14.5

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I have this simple template:

---
const test1 = {
  playsinline: "",
  muted: "",
  autoplay: "",
  foo: ""
}
const test2 = {
  playsinline: true,
  muted: true,
  autoplay: true,
  foo: true
}

---

<html lang="en">
  <head>...</head>
  <body>
    <video {...test1}></video>
    <video {...test2}></video>
  </body>
</html>

The outcome is this:

<body>
  <video muted="" foo=""></video>
  <video playsinline="" muted="true" autoplay="" foo="true"></video>
</body>

So weirdly some attributes are treated different than others. And some get lost in the first case, which should never happen.

What's the expected result?

All attributes are treated equally (whether true should resolve in "" or "true" is up to debate, but make it consistent).

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-k4fy4q3c?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P2: has workaroundAn edge case that only affects very specific usage, but has a trivial workaround (priority)good first issueGood for newcomers. If you need additional guidance, feel free to post in #contribute on Discord

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions