Request for changes to make simplebar work within a shadow dom

[hallzy]

Is your feature request related to a problem? Please describe.

We are developing within a shadow-dom, but simplebar currently doesn't work well inside of shadow doms.

What ends up needing to happen is that the CSS needs to be included twice, once inside the shadow dom, and once in the main page. If you don't include it inside the shadow dom, then the the scroll bar won't be styled at all, and if you don't include it in the main page outside of the shadow dom then the simplebar JS can't access the CSS to do what it needs to do (specific example being scrollbarWidth(), which tries to create a dummy element, and adds a class to it to find the width. Without the CSS this doesn't work and you end up with an extremely wide scrollable area inside the shadow).

For those unfamiliar, you can retrieve the shadow dom of an element with el.getRootNode(), and that will return a the document if you aren't in a shadow as well.

Describe the solution you'd like

Described above

Describe alternatives you've considered

We have tried other scrollbar solutions, but like the fact that this one uses the built in scrolling.

We have also downloaded the files locally and included the css twice, and everything works, but including the CSS twice is something we would prefer not to have to do, and downloading the files ourselves and renaming doesn't make it easy to do updates, so having that naming schema in npm would be best for us.

Additional context

Here is a related issue that someone mentioned a few years ago which is the same issue we are having https://github.com/Grsmto/simplebar/issues/87

I could try taking a stab at creating a PR for this

[Daniel-Knights]

You can use a dynamic import inside the constructor to get around this:

import("simplebar").then((SimpleBar) => {
  new SimpleBar.default(containerEl);
});

Not sure if there're any negative side effects doing this, but it's working fine so far.