Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

by

This does the same as .closest() from inside any child (shadow)DOM

but walking up the DOM crossing shadowroot Boundaries

Optimized for (extreme) minification

//declared as method on a Custom Element:
closestElement(
    selector,      // selector like in .closest()
    base = this,   // extra functionality to skip a parent
    __Closest = (el, found = el && el.closest(selector)) => 
        !el || el === document || el === window
            ? null // standard .closest() returns null for non-found selectors also
            : found 
                ? found // found a selector INside this element
                : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
) {
    return __Closest(base);
}

Note: the __Closest function is declared as ‘parameter’ to avoid an extra let declaration… better for minification, and keeps your IDE from complaining

Called from inside a Custom Element:

<element-x>
//# shadow-root
    <element-y>
        <element-z>
        //# shadow-root
        let container = this.closestElement('element-x');
        </element-z>
    </element-y>
</element-x>

More Related Contents:

  1. How to let imported css font / icons have effects on elements in the shadow dom?
  2. How to communicate between Web Components (native UI)?
  3. How to automate shadow DOM elements using selenium?
  4. How to get element in user-agent shadow root with JavaScript?
  5. Is it possible to access Shadow DOM elements through the parent document?
  6. Nested element (web component) can’t get its template
  7. Accessing Shadow DOM tree with Selenium
  8. Accessing elements in the shadow DOM
  9. How to create new instance of an extended class of custom elements
  10. Override styles in a shadow-root element
  11. Polymer share styles across elements
  12. Use of Template with HTML Custom Elements
  13. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  14. onclick or inline script isn’t working in extension
  15. AngularJS : Difference between the $observe and $watch methods
  16. Converting milliseconds to a date (jQuery/JavaScript)
  17. How to draw sky chart? [closed]
  18. How to perform an integer division, and separately get the remainder, in JavaScript?
  19. Smart way to truncate long strings
  20. check if jquery has been loaded, then load it if false
  21. How do I re-trigger a WebKit CSS animation via JavaScript?
  22. ES6 exporting/importing in index file
  23. Paste an image from clipboard using JavaScript [duplicate]
  24. Open Safari / Google Chrome developer tools programmatically from JavaScript
  25. Firebase (2016) Shallow Query
  26. Loop in Imacros using Javascript
  27. Jquery click function is not working for dynamic elements
  28. How to calculate rotation angle from rectangle points?
  29. converting a javascript string to a html object [duplicate]
  30. What are window.opener / window.parent / window.top?

Leave a Comment