[🐛 Bug]: Some selectors not working with shadow element

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

9.4.x

Node.js Version

22

Mode

Standalone Mode

Which capabilities are you using?

{
    browserName: 'chrome',
    acceptInsecureCerts: true,
    'goog:chromeOptions': {
      args: [
        '--disable-backgrounding-occluded-windows',
        '--window-size=1980,1080',
        '--lang=fr_FR.UTF-8',
        '--disable-search-engine-choice-screen',
      ],
    },
  },

What happened?

Some selectors don't work on shadow element: button=Next or #newTaskInput textarea

What is your expected behavior?

These selectors should be work

How to reproduce the bug.

First example:

  await browser.url('https://taskmob.demo.vaadin.com');
  await expect($('#overlay')).toBeDisplayed();
  await expect($('.button-group')).toBeDisplayed();
  await $('.for-slide-1').click();
  await expect($('button=Next')).toBeExisting(); // Return false

Second example:

  await browser.url('https://taskmob.demo.vaadin.com');
  await expect($('#overlay')).toBeDisplayed();
  await expect($('.button-group')).toBeDisplayed();
  await $('.for-slide-1').click();
  await $('.for-slide-2').click();
  await $('.for-slide-3').click();
  await expect($('>>>#newTaskInput textarea')).toBeExisting(); // Return true
  await expect($('#newTaskInput textarea')).toBeExisting(); // Return false

Relevant log output

Error: Expect $(`#newTaskInput textarea`) to be existing

Expected: "existing"
Received: "not existing"

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues