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

Using 'selected' attribute with Lit components in Astro breaks after PR #12027 #13250

Open
1 task done
Masty88 opened this issue Feb 14, 2025 · 0 comments
Open
1 task done
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@Masty88
Copy link

Masty88 commented Feb 14, 2025

Astro Info

Astro                    v5.2.5
Node                     v20.11.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/vercel
Integrations             @astrojs/lit
                         astro-d2-integration
                         @astrojs/starlight

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

No response

Describe the Bug

Following PR #12027 (which added selected to Astro's list of boolean attributes), using the selected attribute to pass non-boolean values to Lit components in Astro is now broken, as selected is treated as a boolean attribute.

After PR #12027 was merged, the selected attribute was added to Astro's boolean attributes list. This means that in Astro templates, selected is now treated strictly as a boolean attribute rather than allowing string or other values.

This creates compatibility issues when using Lit components that expect non-boolean values through a selected attribute, such as:

<!-- This no longer works as expected -->
<my-lit-component selected="some-value"></my-lit-component>

The component receives the selected attribute as a boolean rather than the string value, causing type errors and broken functionality.

Affected Components

Any Lit components using selected attribute for non-boolean values
Custom elements that expect string/object values through selected attribute

What's the expected result?

the selected attribute should be treated as a string/object value but instead it's now being treated as a boolean attribute by Astro. This means:
Expected behavior:

<color-picker selected="blue">
<!-- should receive "blue" as a string value -->

Actual behavior:

<color-picker selected="blue">
<!-- receives true as a boolean value -->

This breaks any component logic that expects to receive string values through the selected attribute.

Link to Minimal Reproducible Example

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

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Feb 14, 2025
@matthewp matthewp added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels Feb 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

2 participants