[BUG] 'hidden' on web component still resolves a child in the shadow root as visible

Context:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    Memory: 10.23 GB / 31.34 GB
    Container: Yes
  Binaries:
    Node: 14.15.1 - ~/.local/share/nvm/v14.15.1/bin/node
    npm: 6.14.8 - ~/.local/share/nvm/v14.15.1/bin/npm
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
  npmPackages:
    playwright: 1.9.2 => 1.9.2
    playwright-core: 1.9.2 => 1.9.2

• Browser: Chromium

Code Snippet

Proprietary project, but I got a nice picture.

The CSS of the custom element has this when this happens:

:host([hidden]) {
  display: none;
}

Describe the bug

// this fails since it gets stuck here
  await page.waitForSelector('#loaderIcon', {
    state: 'hidden',
  });

I checked with the Inspector and saw this.

  pw:api waiting for selector "#loaderIcon" to be hidden +1ms
  pw:api   selector resolved to visible <xxx-v0-icon name="dial" id="loaderIcon"></xxx-v0-icon> +20ms

I am not sure if the above is failing either due to:

1. It has problem with the web component <xxx-base-v0-loader> being hidden (through the “advanced” CSS above), but the ID of the element waiting to be hidden is a child element.
2. The inspector gets stuck at the above, never re-trying for it to be hidden. Usually I see retries in the inspector (or when using DEBUG=pw:api) but not this time. So maybe it was visible (expected) but then got hidden, but it was never retried if it was?

[dgozman]

@thernstig I will close this one since we cannot reproduce. If you’ll get any luck with providing a repro, please ping me and I’ll reopen and investigate.

@Diokuz That’s indeed a known issue. However, we do not have a good solution here. There are many ways to make element not really visible, and we won’t be able to account for all of them. So far, we settled for this definition. If there are common cases that we can easily account for, we’ll consider changing the definition slightly.

[thernstig]

@yury-s would there be a chance you could assist with this?