如何在Astro项目中加载StencilJS构建的Web组件？

我用StencilJS构建了一个Web组件并发布至NPM，希望在Astro项目中使用，但组件无法加载。

项目依赖配置（package.json）：

"obfuscate-link-web-component": "^0.0.2",

我在Astro页面中通过script标签动态导入该组件：

<Layout title="Impressum" description="Impressum">
      E-Mail: <obfuscate-link email="aGV..."></obfuscate-link><br />
</Layout>
<script>
import('obfuscate-link-web-component');
</script>

可以看到组件package.json中指定为type module的index.js已加载，但未执行，推测与Stencil的懒加载机制有关。需要找到正确加载该Web组件的方法，且不能使用node_modules中的完整文件路径，否则Astro构建时会失效。

更新 #

我按照建议将组件的outputTargets修改为dist-custom-elements和www，并将package.json的入口设置为：

"main": "dist/components/index.js"

现在可以通过以下两种方式正常使用：

方式一： #

<script>
import { ObfuscateLink } from 'obfuscate-link-web-component';
customElements.define('obfuscate-link', ObfuscateLink);
</script>

方式二： #

<script src="https://unpkg.com/obfuscate-link-web-component@0.0.7/dist/components/obfuscate-link.js"></script>

内容的提问来源于stack exchange，提问作者ivoba