Question

我有一些使用stenciljs创建的Web组件。当我从一开始就将它们包含在html中时，一切正常，请参见示例

<codext-gradient-button color="darkblue" class="hydrated">Gradient 
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/@codext/stencil- 
components@0.0.6/dist/gradient-button.js"></script>

https://jsfiddle.net/vqe7wchb/1/。

但是当我动态添加组件时，操作失败，请参见示例

<script>
  let script = document.createElement('script');
    script.src = "https://unpkg.com/@codext/stencil-  components@0.0.6/dist/gradient-button.js";
document.head.appendChild(script);
</script>
<codext-gradient-button color="darkblue" class="hydrated">Gradient Button 
- Darkblue</codext-gradient-button>

https://jsfiddle.net/vqe7wchb/2/。

我确实在github上的stenciljs项目中打开了一个错误，您可能会在https://github.com/ionic-team/stencil/issues/1429中找到更多详细信息。

Answer 1

这是适用于旧版Web浏览器的es5捆绑程序加载器的问题。万一遇到任何麻烦，请确保您在页面的最后一项中动态添加脚本，否则它将无法延迟加载其他脚本。

我在模板github上发布了该问题：https://github.com/ionic-team/stencil/issues/1981

模板js动态导入失败

1 个答案: