Python Selenium - How to locate and add data in textarea which is under #shadow-root (open)

Question

I am trying to locate and enter data in the text area for below code.

But it does not locate the element.

HTML :

    <label _ngcontent-c8="" class="form__label form__label--bottom" for="description ">
        <span _ngcontent-c8="" class="form__label-inner-wrap"> Product description <span _ngcontent-c8="" aria-label="required">*
        </span></span>
    </label>
    <eds-textarea _ngcontent-c8="" id="productDescTextArea" maxlength="1000" name="description" ng-version="9.1.13">
        #shadow-root (open)
        <style>....</style>
        <style>...</style>
        <div class="textarea">
            <textarea class="textarea__input u-mb--" placeholder="Please provide a detail description of product." rows="4">
            </textarea>
            <span id="textarea-character-counter" class="textarea__counter">Characters Available: 
                <span aria-atomic="false" aria-live="true" aria-relevant="text">1000/1000
                </span>
            </span>
        <!----></div>
    </eds-textarea>
</div>

I tried CSS Locator:

 driver.find_element_by_tag_name("textarea")
            driver.find_element_by_css_selector("textarea[placeholder='Please provide a detail description of product.']").send

Also XPATH:

//textarea[@placeholder='Please provide a detail description of product.']

Could not locate the element - Please help !

Answer 1

root = driver.find_element_by_id("productDescTextArea")

textarea = driver.execute_script("return arguments[0].shadowRoot.querySelector('textarea[placeholder=\"Please provide a detail description of product.\"]')",root)

you have to call the shadowRoot and then find element using querySelector