[Feat request] Support different root element

[sag1v]

Currently the lib decide about what is the root element to use for the query see this line.

The issue with this approach, is that sometimes the elements we want to query are rendered outside of this "root" element, E.g: Modals, popovers and portals in general that are attached to the document.body.

I don't see any way to work around this issue with the current implementation, so I'm suggesting an additional API that will allow consumers to pass a root element:

For example:

pseudo: {
  root: document.body, // <- new API
  hover: '.my-tooltip'
}

This can be done in the applyParameter function, we just need to take in account the root parameter and have a fallback to whatever we have today in case the consumer didn't pass it.

  const {root = rootElement, ...parameters} = parameter // <- get the root param with a fallback and also filter it out from the rest of the parameters (i.e states).

  Object.entries(parameters || {}).forEach(_ref => {
    let [state, value] = _ref;

    if (typeof value === "boolean") {
      // default API - applying pseudo class to root element.
      add(root, value && state);
    } else if (typeof value === "string") {
        // explicit selectors API - applying pseudo class to a specific element
        root.querySelectorAll(value).forEach(el => add(el, state));

    } else if (Array.isArray(value)) {
      // explicit selectors API - we have an array (of strings) recursively handle each one
      value.forEach(sel => root.querySelectorAll(sel).forEach(el => add(el, state)));
    }
  });

@ghengeveld WDYT?

[sag1v]

@ghengeveld Would appreciate you take on this :)

[ghengeveld]

Seems reasonable.

@thafryer Should we schedule this?

[sag1v]

Great 👍 you want me to create a PR?

[thafryer]

@sag1v Feel free to go ahead and open a PR!

[ghengeveld]

Please change it to rootElement though, so it's more clear an element is expected (not a CSS selector).

[sag1v]

@thafryer @ghengeveld see #65 PR

[sag1v]

@thafryer @ghengeveld Hi, any chance we can move forward with this?

[github-actions[bot]]

:rocket: Issue was released in v2.1.0 :rocket:

[github-actions[bot]]

:rocket: Issue was released in v2.1.0 :rocket: