Bootstrap в пользовательском htmlelement с использованием Shadow Dom / Template-Slot ⇐ CSS

[Anonymous]

Я хочу иметь свой собственный xy-bootstrap тег в моем приложении. Я хочу инкапсулировать стили начальной загрузки в этот элемент. < /P>
Можете ли вы помочь, почему этот код не работает должным образом?

Код: Выделить всё

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

Подробнее здесь: https://stackoverflow.com/questions/796 ... plate-slot