Script dentro de shadow dom no funciona
He creado y exportado un Elemento Angular (componente web en Angular) como una sola etiqueta de script (user-poll.js). Para usar este Elemento Angular solo necesito especificar debajo de dos líneas en el sitio host:
<user-poll></user-poll>
<script src="path/to/user-poll.js"></script>
Tengo los siguientes requisitos:
Cargue varios elementos angulares en el sitio externo. Cargue todos los elementos angulares dinámicamenteTengo los siguientes problemas:
Cargar múltiples componentes en un sitio genera conflictos angulares, ya que cada script de componente es una aplicación angular completa en sí misma. Para resolver un problema de conflicto, estoy cargando cada componente en una @ separaShadow Dom componente (es decir, agregar la etiqueta del componente y el enlace del archivo de script del componente dentro del contenedor shadow dom) para que cada componente esté protegido. Pero el script de componentes dentro de shadow dom no funciona.JSBin ejemplo del componente de carga dinámica dentro de la sombra dom
<body>
</body>
setTimeout(() => {
loadJS();
}, 2000);
function loadJS() {
var elm = document.createElement("div");
elm.attachShadow({mode: "open"});
elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
document.body.appendChild(elm);
}
Entonces, ¿cuál es la mejor manera de cargar dinámicamente múltiples elementos angulares en un sitio?