2

I've seen various posts about how you cab hide stray elements like this with aura components, and I think the answer with LWC is always 'shadow-dom' as described here but is there really no way to hide the help icon on a Lightning Input Field when you set the label to be hidden?

<lightning-input-field 
key={item.submittedDataField} 
field-name={item.submittedDataField} 
onchange={onInputChange}
title={item.submittedDataField} 
variant="label-hidden" >
</lightning-input-field>

The label is hidden but it still shows the help icon:

But it still shows the help icon

I can see the element I think I want to hide in the Chrome Dev Console:

enter image description here

But no combination of css seems to be able to hide it e.g.

.slds-form-element__icon {
    display: none !important;
}

:host (.slds-form-element__icon) {
    display: none !important;
}
0
0

You always read shadow dom because that is the reason - by definition you can`t style web components from outside (and lightning-input field is a new component context). Thats how the shadow boundaries are defined in the spec.

Right now it is possible to workaround it by loading a global style via loadStyle because salesforce is not using the real / native shadow dom. But this approach is disencouraged by salesforce and is not guaranteed to work for ever (especially if we will ever see the native shadow dom on platform - you will notice that it is already not possible in the default settings of OSS Lwcs). Up to you to decide - besides that option you can`t change it as long the component does not give you the ability to

Not the answer you're looking for? Browse other questions tagged or ask your own question.