malihu-custom-scrollbar-plugin
malihu-custom-scrollbar-plugin copied to clipboard
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 ?