[Webkit-unassigned] [Bug 233380] New: CSS :scope pseudo selector doesn't work in shadowRoot.querySelectorAll

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Nov 19 13:18:22 PST 2021


https://bugs.webkit.org/show_bug.cgi?id=233380

            Bug ID: 233380
           Summary: CSS :scope pseudo selector doesn't work in
                    shadowRoot.querySelectorAll
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: andrei002 at gmail.com

CSS :scope pseudo selector doesn't work in querySelectorAll() when it is called on the shadowRoot of a custom element.
Due to this bug, it's impossible to select direct descendants of the shadowRoot via CSS selector.

Sample code to reproduce the issue:

-------------------------------

  const content = `
    <div>
      <input type="radio" id="btn1" name="btn1" value="Button 1">
      <label for="btn1">Button 1</label><br>
      <div>
        <input type="radio" id="btn2" name="btn2" value="Button 2">
        <label for="btn2">Button 2</label><br>
      </div>
    </div>
  `;
  customElements.define(
    "my-button",
    class extends HTMLElement {
      constructor() {
        super();

        const shadowRoot = this.attachShadow({ mode: "open" });
        shadowRoot.innerHTML = content;
      }
    }
  );

  const container = document.createElement("DIV");
  container.setAttribute("id", "container");
  container.innerHTML = `
    <my-button>FirstButton</my-button>
    <my-button>SecondButton</my-button>
  `;

 document.body.appendChild(container);

 document.body.querySelectorAll(':scope > DIV'); // works

 document.getElementById('container').children[0].shadowRoot.querySelectorAll(':scope > DIV') // fails, [] is returned instead of [div]

-------------------------------

See also related Firefox issue - https://bugzilla.mozilla.org/show_bug.cgi?id=1689893

Note: this is working properly in Chrome.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211119/c1f73031/attachment.htm>


More information about the webkit-unassigned mailing list