Svelte Nesting Components

Nesting in svelte is a way to combine different components to get the desired user interface we want, we can combine our own components or use 3rd party components in our svelte application 

Why do we need nesting?

If we will use a single component to contain all the segments and functionalities of our application then it becomes very impractical and hectic to manage a large codebase so, dividing our app in different components helps in re-usability as well as make it easier to debug the errors if present in an individual component rather than jumping around the whole codebase

Nesting in svelte allows to import components from other files (any-name.svelte) and use them as if they were HTML elements <your_component>

So, first of all, we will use two different components named header and img:

Syntax:

import component_name from "./component_name.svelte";
<component_name/>

Parameter description:

• component_name.svelte: Use the name of your component for importing it into another component or App.svelte for nesting.
• <component_name/>: Use the name of your imported component as an HTML tag to use it inside any component or App.svelte file.

Header_component: Save the below code inside the header.svelte file:

Javascript

<script>

</script>

<style>
    #header {
        background-color: black;
        color: white;
    }

    button {
        background-color: yellow
    }

    button:hover {
        background-color: #00FF00;
        transform: scale(1.2)
    }

    #a {
        margin-left: 410px
    }
</style>
<div id='header'>
    My-app
    <button id='a'>
        option-a
    </button>
    <button id='b'>
        option-b
    </button>
    <button id='c'>
        option-c
    </button>
</div>

img_component: Save the below code inside img.svelte file:

Javascript

<script>
    // here loc is exported as a prop which
    // can be dynamically changed from outside
    export let loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
    function prev() {
        loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
    }
    function next() {
        loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011163934/pic1-300x147.png';
    }
</script>

<style>
    img {
        width: 800px;
    }

    #foot {
        height: 50px;
        width: 800px;
        background-color: aqua;
    }
</style>

<div>
    <img src="{loc}" alt="image">
</div>
<div id='foot'>
    <button on:click={prev}>PREV</button>
    <button on:click={next}>NEXT</button>
</div>

Now we will open the App.svelte file and use the following code:

Example 1:

Javascript

<script>
    import Top from "./top.svelte";
    import ImageDiv from "./image_div.svelte";
</script>
<div>
    <p>
        <b>#As you can see both components are
        now combined inside App.svelte file</b>
    </p>
    <Top />
    <ImageDiv />
</div>

Note: As you can see we can use individual components as a separate HTML tag <>

Output:

Please note the CSS styling we choose inside the component remains connected to the same component and does not affect the styling of another component, styling isolation feature in svelte provides error-free styling

Example 2: Now we are going to create another component that will hold profile pic, name, email, and skills for developers, this component will have props to set the values of the component externally from the App.svelte file

So first create a geeks.svelte file and paste the following code to create the geeks component.

Javascript

<script>
    export let name = 'default',
        email = 'default',
        skills = 'default',
        profile =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011173439/Defaultdp-199x200.png';
</script>
<style>
    #profile {
        width: 500px;
        height: 200px;
        background-color: black;
        margin-left: 150px;
        color: #50C878;
        border-radius: 25px;

    }

    img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        ;

    }

    h3 {
        margin-left: 150px;
    }
</style>
<div id='profile'>
    <img src={profile} alt="profile-pic">
    <h3>Name = {name}</h3>
    <h3>Email = {email}</h3>
    <h3>skills = {skills}</h3>

</div>

Now we will open the App.svelte file and use the following code:

We can call the geeks component inside App.svelte file using the <geeks> tag and pass props to it so it can display the values we want to appear on the display.

App.svelte

Javascript

<script>
    import Top from "./top.svelte";
    import ImageDiv from "./image_div.svelte";
    import Geeks from "./geeks.svelte";
</script>
<div>
    <p>
        <b>#As you can see both components are
        now combined inside App.svelte file</b></p>
    <Top />
    <ImageDiv />
    <Geeks name=mohit email=anything@gmail.com skills=frontend />
    <br>
    <Geeks name=bablu email=bablu@gmail.com skills=backend />
    <br>
    <Geeks name=ankit email=ankit@gmail.com skills=fullstack />
    <br>
    <Geeks name=shreya email=shreya@gmail.com skills=devops />
</div>

Output:

Reference: https://svelte.dev/tutorial/nested-components