Tengo una aplicación incluida en un paquete web en la que agrego algunos elementos de arranque bajo un shadowRoot de la siguiente manera:
#shadow-root (open) <head> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script src="https://unpkg.com/browse/jquery@3.5.1/dist/jquery.min.js"></script> </head> <body> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div> </body>Entonces, cuando hago clic en el botón desplegable, no funciona. Intenté agregar esto a mi archivo js
import * as $ from 'jquery'; let shadowRoot = document.getElementById(divID).shadowRoot; $(shadowRoot).ready(function(){ console.log('In ready'); $(shadowRoot).find('.dropdown-toggle').each(function(){ $(this).dropdown(); }) });Agregar esto me da un error de tipo indefinido que indica que el menú desplegable () no es una función.
ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_18___default(...)(...).dropdown is not a function¿Cómo soluciono este problema?
EDITAR:
Agregué import bootstrap e instalé tether, todavía no funcionó.
import 'bootstrap';He estado recibiendo este error que indica: Error no detectado: la información sobre herramientas de Bootstrap requiere Tether