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.

Sign up for GitHub

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

Jump to bottom

Script is:inline clarifications #1568

Merged
merged 4 commits into from
Sep 19, 2022
Merged

Script is:inline clarifications #1568

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2555b8a
clarify that script loading attributes don't work with is:inline
Jutanium Sep 14, 2022
42ff834
clarify why define:vars implies is:inline
Jutanium Sep 14, 2022
9be0dd9
Update src/pages/en/reference/directives-reference.md
Jutanium Sep 16, 2022
60eedb3
Update src/pages/en/reference/directives-reference.md
Jutanium Sep 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/pages/en/reference/directives-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ By default, Astro will process, optimize, and bundle any `<script>` and `<style>

The `is:inline` directive means that `<style>` and `<script>` tags:

- Will not be bundled into an external file.
- Will not be bundled into an external file. This means that [attributes like `defer`](https://javascript.info/script-async-defer) which control the loading of an external file will have no effect.
- Will not be deduplicated—the element will appear as many times as it is rendered.
- Will not have its `import`/`@import`/`url()` references resolved relative to the `.astro` file.
- Will be pre-processed, for example a `<style lang="sass">` attribute will still generate plain CSS.
Expand Down Expand Up @@ -213,7 +213,9 @@ const message = "Astro is awesome!";
```

:::caution
Using `define:vars` on a `<script>` or `<style>` tag implies the [`is:inline` directive](#isinline), which means your scripts or styles won't be bundled and will be inlined directly into the HTML.
Using `define:vars` on a `<script>` or `<style>` tag implies the [`is:inline` directive](#isinline), which means your scripts or styles won't be bundled and will be inlined directly into the HTML.

This is because when Astro bundles a script, it includes and runs the script once even if you include the component containing the script multiple times on one page. `define:vars` requires a script to rerun with each set of values, so Astro creates an inline script instead.
:::

## Advanced Directives
Expand Down