LWC - Place a component within another component - Parent/Child Components

Question

I currently have two components that are functioning independently from one another. I would like to place one of the components within the other to allow them to appear as one component but be managed independently from one another. I am not currently passing any variables/values from one component to another. I am having difficulty displaying the 'child' component.

Here is the 'Parent' Component:

<template>
<lightning-card value={recordId}>

    <div class="slds-grid slds-gutters">

        <div class="slds-col slds-size_3-of-3">

            <!-- Progress Bar -->
            <lightning-progress-indicator current-step={currentStage} type="path" variant="base">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>

        </div>

        <div class="slds-col slds-size_3-of-3">
            <c-lwc-edit-form></c-lwc-edit-form>
        </div>

    </div>

</lightning-card>

ABOVE, I am referencing the child component here: <c-lwc-edit-form></c-lwc-edit-form>. My understanding is that this would display that component. The components name is actually 'lwcEditForm '.html/.js... (name is just for testing purposes). This looks correct per the documentation, In current state I have no intention of passing values/variables.

Possible Issues/Questions:

1. Do I have to import anything into the 'Parent' Component?
2. Or Export anything from the 'Child
3. Am I perhaps referencing the component incorrectly?

RESPONSE/UPDATE:

I updated the 'Parent' HTML to test your response:

<template>
<lightning-card value={recordId}>

    <div class="slds-grid slds-wrap slds-gutters">

        <!-- <div class="slds-col slds-size_3-of-3">

            <lightning-progress-indicator current-step={currentStage} type="path" variant="base">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>

        </div> -->

        <div class="slds-col slds-size_3-of-3">
            <c-lwc-edit-form></c-lwc-edit-form>
        </div>

    </div>

</lightning-card>

It is still now showing the child component - these are the updates I made:

• I updated the parent div class recommended
• I commented out the 'Progress Bar' functionality and am attempting to only show the 'Child' Component - no dice, nothing is showing.

Answer 1

Do I have to import anything into the 'Parent' Component?

No.

Or Export anything from the 'Child

Just the default export:

export default class LwcEditForm extends LightningElement {
  ...

Am I perhaps referencing the component incorrectly?

Not as far as I can tell.

Your main problem is that you're referencing a SLDS grid with a total size of 6/3 (200% width). You need to add slds-wrap to get the component to appear on the next grid line.

<div class="slds-grid slds-wrap slds-gutters">

Answer 2

<lightning-card value={recordId}>

There is no public property value available on lightning-card base component