[SalesForce] Lightning Path Style Issue in Lightnign Web Component

I am trying to create a lightning path in LWC, for which I used two components with SLDS Path.

But the view is not as expected to Chevron.

Parent Component: customPathLwc

<template>
    <lightning-card>
        <div class="slds-path">
            <div class="slds-grid slds-path__track">
                <div class="slds-grid slds-path__scroller-container">
                    <div class="slds-path__scroller" role="application">
                        <div class="slds-path__scroller_inner">
                            <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                                <template if:true={picklistFieldValues.data}>
                                    <template for:each={picklistFieldValues.data.values} for:item="item">
                                        <c-custom-path-ui-lwc key={item.value} label={item.label} value={item.value} selected-value={selectedValue}></c-custom-path-ui-lwc>
                                    </template>
                                </template>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </lightning-card>
</template>

Child Component: customPathUiLwc

<template>
    <li key={value} class={classList} role="presentation"></li>
        <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id={value} role="option"
            tabindex="0">
            <span class="slds-path__stage">
                <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check">
                    </use>
                </svg>
                <span class="slds-assistive-text">Current Stage:</span>
            </span>
            <span class="slds-path__title">{label}</span>
        </a>
    </li>
</template>

Expected look and feel:

enter image description here

Actual look:

enter image description here

I am setting class for li based on selected value

import { LightningElement, api } from 'lwc';

    export default class CustomPathUILwc extends LightningElement {
        @api selectedValue;
        @api value
        @api label
        get classList() {
            return this.value === this.selectedValue ? 'slds-path__item slds-is-current slds-is-active' : 'slds-path__item ';
        }
    }

Can someone tell what is going wrong here?

Best Answer

The problem comes from the combination of LWC, how you use it and the Lightning Desin System itself.

Indeed, here's the HTML generetad by your code when you add the list item inside another component:

<ul role="listbox" aria-orientation="horizontal" class="slds-path__nav">
     <c-custom-path-ui-lwc>
          <li role="presentation" class="slds-path__item slds-is-incomplete"><a aria-selected="true" href="javascript:void(0);" id="Contacted-120" role="option" tabindex="0" class="slds-path__link">

As you can see, the name of the child component is added as an html element before adding the li element.

Unfortunately, the style applied by Lighting Desin System for the path component can't work with a block between the ul parent and the li element.

The only way I see would be to not use a child component and directly apply your html code inside the same component.

Related Topic