Integration in Web Component

Hi,

I try to integrate this plugin in a Web Component (using a class extending HTMLElement, and defining a shadow-root), but the scroll bar does not display on mouse over. The scroll is not working also. The Javascript seems to work as expected, because I see new nodes and CSS classes dedicated to the plugin, into my target of the scroll. The CSS classes are applyed, I can see rules on the debug console of my browser.

This is the result from my browser (the "#shadow-root" node come from the Web Component):

<collapsable-sidebar title="Admin">
  #shadow-root (open)
    <link rel="stylesheet" href="/assets/js/collapsable-sidebar/style.css"> <!-- import CSS files, like jquery.mCustomScrollbar.min.css -->
    <nav id="sidebar" class="mCustomScrollbar _mCS_1 mCS-autoHide" style="overflow: visible;"><div id="mCSB_1" class="mCustomScrollBox mCS-minimal mCSB_vertical"><div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0; left:0;" dir="ltr">
        <div class="sidebar-header d-flex">
            <span class="title-full flex-fill pt-2 fs-5" id="sidebar-title">Admin</span>
            <button type="button" id="sidebarCollapse" class="btn">
                <i class="bi bi-list"></i>
            </button>
        </div>

        ...

    </div></div></nav>
    <script src="/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
</collapsable-sidebar>

Here is my javascript:

class CollapsableSidebar extends HTMLElement {
  // ...
  connectedCallback() {
      const templateCloned = template.content.cloneNode(true);

      // Add the "style.css" file
      const cssImport = $(`<link rel="stylesheet" href="${dirname}/style.css" />`);
      $(templateCloned).prepend( cssImport );
      const shadow = this.attachShadow({mode : 'open' });
      shadow.append( templateCloned );

      $(shadow.getElementById("sidebar")).mCustomScrollbar({
        theme: "minimal",
        alwaysShowScrollbar: 1,
      });
  }
}

What did I missed in the configuration of the plugin ?

malihu / malihu-custom-scrollbar-plugin

Integration in Web Component #676