[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


            Bug ID: 233380
           Summary: CSS :scope pseudo selector doesn't work in
           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 = `
      <input type="radio" id="btn1" name="btn1" value="Button 1">
      <label for="btn1">Button 1</label><br>
        <input type="radio" id="btn2" name="btn2" value="Button 2">
        <label for="btn2">Button 2</label><br>
    class extends HTMLElement {
      constructor() {

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

  const container = document.createElement("DIV");
  container.setAttribute("id", "container");
  container.innerHTML = `


 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