Hola a todos, espero que estén teniendo un buen día.
Estoy creando un componente web que usa bootstrap 5. Dado que se supone que el shadow DOM encapsula el estilo, asumí que sería una buena manera de evitar que colisione con cualquier sitio que pueda estar usando versiones anteriores de bootstrap (ya que tienden tener el mismo nombre de clase). Siento que me estoy perdiendo algo obvio, pero cada vez que incluyo otras versiones de bootstrap en el documento html, anulan lo que hay en mi componente. He estado atascado en él durante unos días y no he encontrado nada que explique por qué podría ser esto.
const template = document.createElement('template'); template.innerHtml = ` <style>@import "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" </style> <div class="container"> <p>All my web component stylings go on from here and use bootstrap classes as well</p> </div> ` class MyWebComponent extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); } } window.customElements.define('my-web-component', MyWebComponent);Y mi archivo index.html es simplemente
<head> <link rel="stylesheet" href="link to bootstrap3 or boostrap4.css" /> <script type="module" src="linkToMyWebComponent"></script> </head> <body> <my-web-component /> </body>He notado que si defino estilos manualmente dentro de la plantilla html como
<style>.form-control { p: 10 }</style>que funciona bien y sobrescribe todos los estilos. Cualquier ayuda o material de aprendizaje sería muy apreciada. Aunque siento que he leído al menos dos docenas de artículos largos sobre plantillas, shadow dom, etc. en este momento. El shadow dom aplanado parece que debería ser encapsulado de los scripts más antiguos, pero no hubo suerte.
¡Gracias de antemano!