Add .slds-is-selected to LWC from child

Question

I'm fairly new to LWC coming from Aura. This may be a simple question.

I have a list on my main component with child-component items. Clicking these, sets another child-component (selectedTask). I need to add .slds-is-selected class to the LI element when firing the onSelect event on the component, and removing it when selecting another. My problem is identifying the LI item from the event and key, as well as adding and removing the class.

<template>
    <div class="slds-grid slds-gutters">
        <template if:true={_wiredCaseResult.data}>
        <lightning-card title='Sagsopgaver' style="width:300px" icon-name="standard:product_required" class="slds-m-left--small slds-m-right--small">
            <lightning-layout class="slds-var-m-around_medium">
                <template if:true={_wiredTaskResult.data}>
                    <ul class="slds-list--vertical slds-has-cards slds-has-block-links--space slds-has-list-interactions">
                        <template for:each={_wiredTaskResult.data} for:item="task">
                            <li key={task.Id} class="slds-list__item">
                            <c-production-task-list-item task={task}
                                onselect={handleSelect}></c-production-task-list-item>
                            </li>
                        </template>
                    </ul>
                </template>
            </lightning-layout>
        </lightning-card>
    </template>
        <template if:true={selectedTask}>
            <c-production-task-details style="width:100%" class="slds-m-right--small" task={selectedTask} onupdate={updateHandler}>
            </c-production-task-details>
        </template>
    </div>
</template>
    
    
    handleSelect(event) {
        const taskId = event.detail;
        this.selectedTask = this._wiredTaskResult.data.find(
              (task) => task.Id === taskId
            );
         }

Edit: added more code

Edit 2: I ended up with this solution in the eventhandler

  handleSelect(event) {
    // handle selected class on list items
    var _listItem = event.currentTarget.parentNode; // this is the <LI>
    var _listItems = _listItem.parentNode.childNodes; // this is every <LI> in the <UL>
    for (var i = 0; i < _listItems.length; i++) {
      _listItems[i].classList.remove("slds-is-selected");
    }
    _listItem.classList.add("slds-is-selected");

    const taskId = event.detail;
    this.selectedTask = this._wiredTaskResult.data.find(
      (task) => task.Id === taskId
    );
  }

Answer 1

If your list and its items are in the same component (no child component), you'll need to store the list item classes in the list data itself. This works but it's cumbersome.

If you down this path, you'll need a new classes property on your task like this:

<li key={task.Id} class={task.classes}>

You'll need to update the list data when the user makes a selection:

handleSelect(event) {
    // TODO: copy list data.
    // For each list item, fill a 'classes' string attribute with either
    // 'slds-list__item' if the item is not selected
    // 'slds-list__item slds-is-selected' if the item is selected
}

That being said, it will be easier to split the list from the list items by creating a child component. If you do this, you won't need to modify the list data and you can handle the selection state in the sub-component.

Check out the LWC Recipes sample app for some ideas on how to do this.