element-qsa-scope

Return elements matching a selector relative to the current node

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
element-qsa-scope
1.1.06 years ago7 years agoMinified + gzip package size for element-qsa-scope in KB

Readme

Element QSA Scope Element QSA Scope
!NPM Versionnpm-imgnpm-url !Build Statuscli-imgcli-url !Licensinglic-imglic-url !Changeloglog-imglog-url !Gitter Chatgit-imggit-url
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