element-qsa-scope

    1.1.0 • Public • Published

    Element QSA Scope

    NPM Version Build Status Licensing Changelog Gitter Chat

    Element QSA Scope lets you select elements relative to the current node. It is a polyfill for :scope support within the selector methods Element#querySelector, Element#querySelectorAll, Element#matches, and Element#closest.

    npm install element-qsa-scope

    The entire script is 341 bytes when minified and gzipped.

    How it works

    By default, selector methods return elements matching CSS selectors absolutely from the document, similar to an element being matched with Element#matches. Imagine the following document:

    <ul>
      <li><a>Link</a>
        <ul>
          <li><a>Sublink</a></li>
        </ul>
      </li>
    </ul>
    <script>li = document.querySelector('li')</script> 

    Without :scope, the following selector will return the first link.

    li.querySelector('li a'); // returns <a>Link</a>

    This is an example of how scoping is useful when traversing the DOM.

    li.querySelector(':scope li a'); // returns <a>Sublink</a>

    Browser compatibility

    Browser Native Support Polyfill Support
    Android 4.4+ 2.2 - 4.2
    Blackberry 7+
    Chrome 27+ 4 - 26
    Edge 12+
    Firefox 32+ 3.5 - 31
    Internet Explorer 8 - 11
    Opera 15+ 10 - 14
    Opera Mini 5+
    Safari (iOS) 7+ 3.2 - 6
    Safari (MacOS) 6.2+ 4 - 6

    Test Results

    Additional tests were run against the latest 3 versions of browsers, including common outliers such as Internet Explorer 8+ and Safari 6+.

    Native Support · Polyfilled Support

    Install

    npm i element-qsa-scope

    DownloadsWeekly Downloads

    4,558

    Version

    1.1.0

    License

    CC0-1.0

    Unpacked Size

    7.96 kB

    Total Files

    5

    Last publish

    Collaborators

    • jonathantneal