Файлы Bootstrap js не работают в пользовательском элементе API параметров vue 3 ⇐ CSS

[Anonymous]

Я пытаюсь использовать Bootstrap 5 в пользовательском элементе Vue 3 Options Api. У меня возникли проблемы с правильной загрузкой начальной загрузки.
Это мой файл main.ts:

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

import { defineCustomElement } from 'vue'
import 'bootstrap/dist/js/bootstrap.bundle'
import App from './App.ce.vue'

let element = defineCustomElement(App);

customElements.define("app-trackingsidebar", element);

и файл vue.config.js:

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

module.exports = {
productionSourceMap: true,
parallel: false,
css: {
extract: false,
},
configureWebpack: {
entry: './src/main.ts',
optimization: {
splitChunks: false,
minimize: false
},
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/,
},
],
},
},

};

и в моем App.ce.vue я также загружаю bootstrap.min.css, используя элемент Link в верхней части шаблона element, но я загрузил соответствующую версию файла и обслуживаю ее со своего сервера, и она работает:

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

- - -

мой файл package.json:

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

{
"name": "projectName",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"preview": "vite preview"
},
"dependencies": {
"@vue/web-component-wrapper": "^1.3.0",
"@vueuse/core": "^10.5.0",
"bootstrap": "^5.3.3",
"vue-loader": "^16.8.2"
},
"devDependencies": {
"@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-service": "~5.0.0",
"@vue/compiler-sfc": "^3.3.8",
"ts-loader": "^9.5.0",
"typescript": "^5.2.2",
"vue": "^3.3.4"
}
}

Я могу использовать только файл js из сборки из-за ситуации с проектом.
Стили и классы Bootstrap работают благодаря ссылке
Стили и классы Bootstrap работают благодаря ссылке
code> элемент, который загружал bootstrap.min.css, но я не могу получить функциональность, например: я хочу использовать аккордеоны, и стили работают, но сами аккордеоны не работают, когда я нажимаю на них, не они открываются или закрываются.

Параметры поиска и параметры отслеживания — это кнопки для аккордеонов, но они только выглядят как кнопки и ничего не делают.
поскольку пользовательские элементы отображаются в Shadow DOM , я не могу использовать ничего, кроме материалов проекта CEs.
Я подтвердил, что в моем файле сборки есть загрузочный js-код, поскольку в моей сборке есть такой код вместе с какая-то функция начальной загрузки:

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

/*!
* Bootstrap v5.3.3 (https://getbootstrap.com/)
* Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/

/**
* --------------------------------------------------------------------------
* Bootstrap util/index.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/

/**
* --------------------------------------------------------------------------
* Bootstrap dom/manipulator.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/

/**
* --------------------------------------------------------------------------
* Bootstrap util/config.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/

// and some more

Это позволило мне подтвердить, что файл bootstrap.bundle.min.js был успешно загружен в проекте. Не могу понять, почему нет функционала и не работают аккордеоны.

Подробнее здесь: https://stackoverflow.com/questions/785 ... om-element