1

I was trying to build a custom Path component for LWC, just to display sort of navigation.

I'm using two custom LWC components. On for Path as wrapper and one for Path Item.

Rendered html looks like this:

<c-custom_path>
<div class="slds-path">
    <div class="slds-grid slds-path__track">
        <div class="slds-grid slds-path__scroller-container">
            <div role="application" class="slds-path__scroller">
                <div class="slds-path__scroller_inner">
                    <ul role="listbox" aria-orientation="horizontal" class="slds-path__nav">
                        <c-custom_path_item>
                        <li role="presentation" class="slds-path__item slds-is-current current slds-is-active">
                            <a aria-selected="true" href="" id="Path-0-134" role="option" tabindex="0" class="slds-path__link">
                                <span class="slds-path__stage">
                                    <svg aria-hidden="true" class="slds-icon slds-icon_x-small">
                                        <use xlink:href="#httpshuskyenergydev02lightningforcecomassetsiconsutilityspritesvgsymbolssvg_check">
                                        </use>
                                    </svg>
                                </span>
                                <span class="slds-path__title">Main Information</span>
                            </a>
                        </li>
                        </c-custom_path_item>
                        <c-custom_path_item>
                        <li role="presentation" class="slds-path__item slds-is-incomplete">
                            <a aria-selected="true" href="" id="Path-1-135" role="option" tabindex="-1" class="slds-path__link">
                                <span class="slds-path__stage">
                                    <svg aria-hidden="true" class="slds-icon slds-icon_x-small">
                                        <use xlink:href="#httpshuskyenergydev02lightningforcecomassetsiconsutilityspritesvgsymbolssvg_check">
                                        </use>
                                    </svg>
                                </span>
                                <span class="slds-path__title">Engine Information</span>
                            </a>
                        </li>
                        </c-custom_path_item>
                        <c-custom_path_item>
                        ...
                        </c-custom_path_item>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</c-custom_path>

Issue is that those tags are breaking standard lightning styling.

Question: Is it possible to somehow tell lightning framework to not render those tags? I don't want to copy paste all css classes and add that component name in there. I even don't know if that would help at all.

1
  • 2
    No, you can't "hide" or "remove" these elements. Probably the easiest way to fix this would be to make the path items part of the path template instead.
    – sfdcfox
    May 21 '19 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.