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

[thernstig]

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?

[thernstig]

Note: I want to actually copy the entire <xxx-base-v0-loader> as seen in the picture above with all its elements and children (including shadow-root) in the picture above but have not found an easy way. That would be much better than me pasting pictures. Any tips welcome. I've searched but not found the answer.

[thernstig]

Note that I tried this as well and it also failed in the exact same manner:

  await page.waitForSelector('xxx-base-v0-loader', {
    state: 'hidden',
  });

Is this due to that Playwright has problem with this CSS shown above with :host([hidden])? I do still think it is strange that I do not see any retries though in the DEBUG=pw:api.

[thernstig]

This doesn't work either:

  await page.waitForSelector('xxx-base-v0-loader[hidden]');

  pw:api waiting for selector "xxx-base-v0-loader[hidden]" to be visible +1ms
  pw:api   selector resolved to hidden <xxx-base-v0-loader hidden="" size="medium" class="loader"></xxx-base-v0-loader> +31ms

In that instance should it not wait for hidden as an attribute and not hidden=""? Although maybe it makes no difference.

[dgozman]

I am struggling to reproduce this one - perhaps need more details.

I try on the following html:

  <x-host hidden>
    #shadow-root
      <style>
      :host([hidden]) {
        display: none;
      }
      </style>
      <div>Find me</div>
  </x-host>

Here is the script:

  await page.setContent(`
    <x-host hidden></x-host>
    <script>
      const host = document.querySelector('x-host');
      const root = host.attachShadow({ mode: 'open' });
      const style = document.createElement('style');
      style.textContent = ':host([hidden]) { display: none; }';
      root.appendChild(style);
      const child = document.createElement('div');
      child.textContent = 'Find me';
      root.appendChild(child);
    </script>
  `);
  expect(await page.textContent('div')).toBe('Find me');
  await page.waitForSelector('div', { state: 'hidden' });

It finishes just fine, and I see selector resolved to hidden <div>Find me</div>. When removing state: 'hidden', script hangs as expected.

Note: I want to actually copy the entire as seen in the picture above with all its elements and children (including shadow-root) in the picture above but have not found an easy way. That would be much better than me pasting pictures. Any tips welcome. I've searched but not found the answer.

There is an experimental api getInnerHTML (https://web.dev/declarative-shadow-dom/#serialization), available in Chromium 90+, should work in this case.

[thernstig]

@dgozman thanks for trying to replicate, at least it yielded a test case so far :)

Maybe this might be related to #5858. Closed by #5950 and #5963

How about I wait those, then verify my other problems, then when verified tries this out again.

The getInnerHTML is a great tip! Hope it gets included as a right-click shortcut on DOM-elements in Chrome DevTools.

[dgozman]

How about I wait those, then verify my other problems, then when verified tries this out again.

Sure, let's give it some time!

The getInnerHTML is a great tip! Hope it gets included as a right-click shortcut on DOM-elements in Chrome DevTools.

Nice one! You can file an issue for that 😄

[Diokuz]

Have the same problem for just two divs:

<div>
  <div>
...

Parent div has max-height: 0; overflow: hidden, so it hides anything inside it. But frame.waitForSelector says inner div is still visible.

Inner div has non-zero height and width, but it is hidden by its parent.

[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]

I am awaiting release 1.11 to make sure all recent bugs are in before testing this again.

[thernstig]

@dgozman I have now upgraded, but it did unfortunately not fix my issue. Is there any chance we could have a shared session where I show you the problem we are facing?

[thernstig]

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