Bootstrap in benutzerdefinierter HTMLElement mit Shadow DOM / Template-Slot ⇐ HTML

[Anonymous]

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?

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