LWC remove option from lightning-input-field type combobox

Question

I have a lightning-input-field that shows picklist options I need to remove one of the options at run time, I tried using querySelector to hide the option but it always returns null.

 <div class="removeOptions">
            <lightning-input-field  required="true" name="TechnicalSubject" onchange={handleActionField} label="Action Taken" field-name="ActionTaken__c" variant="label-hidden">
            </lightning-input-field>
          </div> 

JS

handleActionField(event){
            const items = this.template.querySelector(".removeOptions[data-value='NO ACTION TAKE']");
            console.log('HandleActionShow ', items);
            items.style.display = 'none';                
        }

Answer 1

Using lightning-input-field, you wouldn't be able to affect the inner contents of the component, because it is protected by the Shadow DOM. This feature prevents most styles from bleeding into a component, as well as limits the ability for any component outside of the Shadow DOM from accessing elements inside the Shadow DOM. Instead, you'll need to use the appropriate tools within Salesforce, such as creating a record type, field dependency, or other supported mechanisms.