As I work on developing a Chrome extension, I found myself in need of incorporating the split-button feature provided by Bootstrap within a shadow DOM. Despite my efforts, I have not been able to find clear guidelines on how to achieve this. Can anyone provide insights on creating a shadow DOM that integrates the necessary Bootstrap CSS, JS, and Popper JS files?
I attempted the following approach but unfortunately, the button did not appear:
const shadowHost = document.getElementById('my-shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
// HTML for Bootstrap button and dropdown menu
const bootstrapButtonAndDropdown = `
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="btn-group">
<button type="button" class="btn btn-primary">Bootstrap Button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
`;
// Inject Bootstrap components into the shadow root
shadowRoot.innerHTML = bootstrapButtonAndDropdown;
// Set up an event listener for the button inside the Shadow DOM
const buttonInsideShadowDom = shadowRoot.querySelector('.btn-primary');
buttonInsideShadowDom.addEventListener('click', () => {
alert('Button inside Shadow DOM clicked!');
});
class SplitButton extends HTMLElement {
constructor() {
super();
this.render();
}
render() {
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML += template;
}
}
window.customElements.define("split-button", SplitButton);
Trying to call the split button:
const button = document.createElement('split-button');
However, the button appears as null.