从UNPKG CDN加载Web Component时无法渲染的问题排查

以下是可行的解决步骤：

• 添加脚本的type="module"属性
  很多现代Web Component包采用ES模块格式，浏览器默认不会将普通<script>标签解析为模块。修改脚本标签为：

  <script type="module" src="https://unpkg.com/fspubtest1234"></script>
  

• 调整脚本加载时机
  如果脚本放在<head>中，可能会在DOM解析到<hello-world>之前就执行，导致组件注册时找不到对应的DOM元素。可以把脚本移到<body>末尾：

  <body>
    <h1>UNPKG CDN TEST</h1>
    <hello-world name="Doffen"></hello-world>
    <script type="module" src="https://unpkg.com/fspubtest1234"></script>
  </body>
  

  或者给脚本加上defer属性，让脚本在DOM加载完成后执行：

  <script type="module" defer src="https://unpkg.com/fspubtest1234"></script>
  

• 指定正确的模块入口路径
  如果上述方法无效，可能是UNPKG默认加载的入口文件不是ES模块。可以查看包的package.json中的module字段（直接访问https://unpkg.com/fspubtest1234/package.json就能看到），然后直接加载对应的模块文件。比如假设module字段是dist/fspubtest1234.esm.js，就用：

  <script type="module" src="https://unpkg.com/fspubtest1234/dist/fspubtest1234.esm.js"></script>
  

这些方法的核心是让浏览器正确识别并加载ES模块，同时确保组件注册时对应的DOM元素已经存在，这样就能正常渲染自定义组件了。

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