I created this post for future reference, with my own examples as I was following along some basic Svelte tutorials that can be found here ( https://svelte.dev/tutorial/ )

Svelt script for first letter uppercase/capital

<!-- App.svelte -->
<script>
let name = 'hashnode';

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
</script>

<h1>Hello {capitalizeFirstLetter(name)}!</h1>

Dynamic attributes example with a random image

<!-- App.svelte -->
<script>
    let src = 'https://picsum.photos/200/200';
    let alt = 'Some random image';
</script>
<h1>Image 1</h1>
<img alt={alt} src={src}>
<h1>Image 2</h1>
<img {alt} {src}>

Adding CSS to a component

<!-- App.svelte -->
<style>
    span {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>

Nested components with scoped styles

<!-- App.svelte -->
<script>
    import Nested from './Nested.svelte';
</script>

<style>
    span {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>
<Nested/>

<!-- Nested.svelte -->
<style>
    span {
        color: green;
    }
</style>
<h2>Hello fellow <span>reader</span>!</h2>

Nested components with global styles

<!-- App.svelte -->
<script>
    import Nested from './Nested.svelte';
</script>

<style>
    :global(span) {
        color: blue;
        font-family: sans-serif;
    }
</style>

<h1>Hi <span>Hashnode</span>!</h1>
<Nested/>

<!-- Nested.svelte -->
<h2>Hello fellow <span>reader</span>!</h2>

HTML tags / Remember to sanitize them b4 displaying them

<!-- App.svelte -->
<script>
    let string = `Withount html tag <strong>HTML CONTENT!!!</strong>`;
    let string2 = `With html tag <strong>HTML CONTENT!!!</strong>`;
</script>

<p>{string}</p>
<p>{@html string2}</p> <!-- this still needs sanitization -->

What does Svelte look like? Basic Svelte Code Examples

Comments

More from this blog

Time and space complexity

Hello Javascript with Google Dev Tools. How to run and learn Javascript Code using Google Dev Tools.

What a website for a business really is and why it is critical to choose a designer who knows about conversion rates

Tips on how to learn Python by yourself

Svelt script for first letter uppercase/capital

Dynamic attributes example with a random image

Adding CSS to a component

Nested components with scoped styles

Nested components with global styles

HTML tags / Remember to sanitize them b4 displaying them

Command Palette

Comments

More from this blog

Svelt script for first letter uppercase/capital

Dynamic attributes example with a random image

Adding CSS to a component

Nested components with scoped styles

Nested components with global styles

HTML tags / Remember to sanitize them b4 displaying them