1

I am trying to remove redundant title from options list inside lightning-combobox, either I cant penetrate deeply inside or Im doing something wrong. well initially it is not in the DOM unless I open it.

https://www.lightningdesignsystem.com/components/combobox/ it is that title here

docu

... <span class="slds-truncate" title="Accounts">Accounts</span> ...

my html

<lightning-combobox name="numbers" variant="label-hidden" value={value} options={options} onchange={handleChange}> </lightning-combobox>

my js

 removeTitle() { let titleSelector = ".slds-listbox__option .slds-media__body .slds-truncate" this.template.querySelectorAll(titleSelector).forEach(element => { element.removeAttribute("title"); }); }

I have tried different selector variations, I am running it inside renderedCallback(), I have tried running it inside onchange function but to no avail.

Improve this question

1 Answer 1

Reset to default
4

It's a feature of LWC's Shadow DOM, which ensures both CSS and Element isolation.
You're allowed to modify only what is defined in your component. <span class="slds-truncate" title="Accounts">Accounts</span> is defined inside the lightning-combobox component, so your component is not aware of it, that's why this.template.querySelectorAll(selector) returns an empty list.

You could create your own combobox component from the blueprint you've linked in order to have that title attribute removed.

Improve this answer
0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.