How to avoid Svelte from presenting part of the template to the client
HTML comments are great for hiding elements on the page.
In HTML, this is how you add comments:
<!-- a comment here -->You can also use it on blocks to hide multiple lines of HTML:
<!--
a
comment
here
-->Note that this is still visible in the page source. The browser just hides it, but the comment is always visible.
You can use the same annotations in Svelte templates. However, with Svelte, you will not send the annotated part to the browser. This part has been completely deleted and only remains in your source file, which is not visible to the HTML generated in the page.
I think this is a positive thing.
Download mine for freeSlim Handbook
More subtle tutorials:
- Getting started with Svelte-short tutorial
- How to use props in Svelte
- How to import components in Svelte
- How to export functions and variables from Svelte components
- Slim template: conditional logic
- How to re-render Svelte components on demand
- Slim slot
- How to add comments in Svelte templates
- Slim binding
- Handling status updates in Svelte
- Reactive statements in Svelte
- Slim life cycle events
- Slim template: loop
- Resolve the promise in the Svelte template
- Dealing with Svelte's activities
- Svelte's cross-component state management
- How to access URL parameters in Sapper outside the script module
- How to dynamically apply CSS in Svelte
- How to redirect to URL in Sapper
- How to simulate for loop in Svelte template