Bootstrap in benutzerdefinierter HTMLElement mit Shadow DOM / Template-Slot
Posted: 13 May 2025, 16:03
Ich möchte mein eigenes XY-Bootstrap Tag-Element in meiner Anwendung haben. Ich möchte die Bootstrap-Stile in diesem Element einkapseln. < /P>
Können Sie helfen, warum dieser Code nicht richtig funktioniert?
Können Sie helfen, warum dieser Code nicht richtig funktioniert?
Code: Select all
class XYBootstrap extends HTMLElement {
constructor() {
super();
debugger;
// Shadow DOM anlegen
const shadow = this.attachShadow({
mode: 'open'
});
// Bootstrap-CSS importieren
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
// hier z.B. die CDN-URL von Bootstrap 5
link.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
shadow.appendChild(link);
// Slot für den Light DOM
const slot = document.createElement('slot');
shadow.appendChild(slot);
}
}
customElements.define('xy-bootstrap', XYBootstrap);< /code>
Primary
Secondary
Success
Danger