blob: e3f3d67eb4f80ca7b6f540acc82b216d7b4ec2ba (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
---
'astro': major
---
Fixes attribute rendering for non-[boolean HTML attributes](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML) with boolean values to match proper attribute handling in browsers.
Previously, non-boolean attributes may not have included their values when rendered to HTML. In Astro v5.0, the values are now explicitly rendered as `="true"` or `="false"`
In the following `.astro` examples, only `allowfullscreen` is a boolean attribute:
```astro
<!-- src/pages/index.astro -->
<!-- `allowfullscreen` is a boolean attribute -->
<p allowfullscreen={true}></p>
<p allowfullscreen={false}></p>
<!-- `inherit` is *not* a boolean attribute -->
<p inherit={true}></p>
<p inherit={false}></p>
<!-- `data-*` attributes are not boolean attributes -->
<p data-light={true}></p>
<p data-light={false}></p>
```
Astro v5.0 now preserves the full data attribute with its value when rendering the HTML of non-boolean attributes:
```diff
<p allowfullscreen></p>
<p></p>
<p inherit="true"></p>
- <p inherit></p>
+ <p inherit="false"></p>
- <p data-light></p>
+ <p data-light="true"></p>
- <p></p>
+ <p data-light="false"></p>
```
If you rely on attribute values, for example to locate elements or to conditionally render, update your code to match the new non-boolean attribute values:
```diff
- el.getAttribute('inherit') === ''
+ el.getAttribute('inherit') === 'false'
- el.hasAttribute('data-light')
+ el.dataset.light === 'true'
```
|
