use our selector engine instead of native api

js/src/collapse.js

@@ -74,11 +74,11 @@ class Collapse {
       `[data-toggle="collapse"][data-target="#${element.id}"]`
     ))
 
-    const toggleList = Util.makeArray(document.querySelectorAll(Selector.DATA_TOGGLE))
+    const toggleList = Util.makeArray(SelectorEngine.find(Selector.DATA_TOGGLE))
     for (let i = 0, len = toggleList.length; i < len; i++) {
       const elem = toggleList[i]
       const selector = Util.getSelectorFromElement(elem)
-      const filterElement = Util.makeArray(document.querySelectorAll(selector))
+      const filterElement = Util.makeArray(SelectorEngine.find(selector))
         .filter((foundElem) => foundElem === element)
 
       if (selector !== null && filterElement.length) {
@@ -130,7 +130,7 @@ class Collapse {
     let activesData
 
     if (this._parent) {
-      actives = Util.makeArray(this._parent.querySelectorAll(Selector.ACTIVES))
+      actives = Util.makeArray(SelectorEngine.find(Selector.ACTIVES, this._parent))
         .filter((elem) => {
           if (typeof this._config.parent === 'string') {
             return elem.getAttribute('data-parent') === this._config.parent
@@ -343,7 +343,7 @@ class Collapse {
 
   static _getTargetFromElement(element) {
     const selector = Util.getSelectorFromElement(element)
-    return selector ? document.querySelector(selector) : null
+    return selector ? SelectorEngine.findOne(selector) : null
   }
 
   static _collapseInterface(element, config) {

js/src/dropdown.js

@@ -152,7 +152,7 @@ class Dropdown {
        * Popper - https://popper.js.org
        */
       if (typeof Popper === 'undefined') {
-        throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org/)')
+        throw new TypeError('Bootstrap\'s dropdowns require Popper.js (https://popper.js.org)')
       }
 
       let referenceElement = this._element
@@ -286,7 +286,7 @@ class Dropdown {
       const parent = Dropdown._getParentFromElement(this._element)
 
       if (parent) {
-        this._menu = parent.querySelector(Selector.MENU)
+        this._menu = SelectorEngine.findOne(Selector.MENU, parent)
       }
     }
     return this._menu
@@ -442,7 +442,7 @@ class Dropdown {
     const selector = Util.getSelectorFromElement(element)
 
     if (selector) {
-      parent = document.querySelector(selector)
+      parent = SelectorEngine.findOne(selector)
     }
 
     return parent || element.parentNode
@@ -482,7 +482,7 @@ class Dropdown {
       return
     }
 
-    const items = Util.makeArray(parent.querySelectorAll(Selector.VISIBLE_ITEMS))
+    const items = Util.makeArray(SelectorEngine.find(Selector.VISIBLE_ITEMS, parent))
 
     if (!items.length) {
       return

js/src/modal.js

@@ -246,7 +246,7 @@ class Modal {
     this._element.setAttribute('aria-modal', true)
 
     if (this._dialog.classList.contains(ClassName.SCROLLABLE)) {
-      this._dialog.querySelector(Selector.MODAL_BODY).scrollTop = 0
+      SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog).scrollTop = 0
     } else {
       this._element.scrollTop = 0
     }

js/src/scrollspy.js

@@ -118,7 +118,7 @@ class ScrollSpy {
 
     this._scrollHeight = this._getScrollHeight()
 
-    const targets = Util.makeArray(document.querySelectorAll(this._selector))
+    const targets = Util.makeArray(SelectorEngine.find(this._selector))
 
     targets
       .map((element) => {
@@ -126,7 +126,7 @@ class ScrollSpy {
         const targetSelector = Util.getSelectorFromElement(element)
 
         if (targetSelector) {
-          target = document.querySelector(targetSelector)
+          target = SelectorEngine.findOne(targetSelector)
         }
 
         if (target) {
@@ -284,7 +284,7 @@ class ScrollSpy {
   }
 
   _clear() {
-    Util.makeArray(document.querySelectorAll(this._selector))
+    Util.makeArray(SelectorEngine.find(this._selector))
       .filter((node) => node.classList.contains(ClassName.ACTIVE))
       .forEach((node) => node.classList.remove(ClassName.ACTIVE))
   }

js/src/tab.js

@@ -106,7 +106,7 @@ class Tab {
     }
 
     if (selector) {
-      target = document.querySelector(selector)
+      target = SelectorEngine.findOne(selector)
     }
 
     this._activate(
@@ -193,7 +193,7 @@ class Tab {
       const dropdownElement = SelectorEngine.closest(element, Selector.DROPDOWN)
 
       if (dropdownElement) {
-        Util.makeArray(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE))
+        Util.makeArray(SelectorEngine.find(Selector.DROPDOWN_TOGGLE))
           .forEach((dropdown) => dropdown.classList.add(ClassName.ACTIVE))
       }