如何向页面添加web components？嵌套子组件是否需在父组件内导入？

核心结论 #

完全应该将子组件在父组件内部导入，而非全部放在index.html中统一引入，这个逻辑和React/Vue的组件封装原则是一致的，核心优势如下：

• 组件完全自包含：使用者只需要引入<search-select>对应的父组件文件即可，不需要额外关心它依赖了多少子组件，避免出现漏加载子组件导致组件渲染异常的问题
• 依赖关系清晰：所有组件的依赖直接写在组件自身代码里，不用在html的script列表里人肉维护依赖顺序，避免出现子组件晚于父组件加载导致自定义元素不识别的问题
• 便于后续复用和迁移：如果后续要把<search-select>组件迁移到其他项目，直接挪整个组件目录即可，不需要单独整理它的依赖脚本

具体实现方式（原生Web Components标准方案） #

现在原生Web Components推荐基于ES模块实现，操作步骤如下：

1. 首先将三个组件的JS文件都改为ES模块格式，每个文件负责注册对应的自定义元素即可，不需要额外暴露全局变量
2. 在SearchSelect.js的顶部，直接引入两个子组件的文件：

// SearchSelect.js 顶部添加这两行，注意路径要和你实际的文件相对位置匹配
import './Autocomplete-input.js'
import './Autocomplete-dropdown.js'

// 下面保留你原来的<search-select>组件定义和customElements.define的逻辑

3. 此时index.html里只需要引入父组件一个脚本即可，注意要给script标签加type="module"属性：

<script type="module" src="./components/selection/SearchSelect.js"></script>

注意事项：如果你的项目没有使用构建工具，直接在浏览器里运行的话，引入的路径必须写全后缀（.js不能省略），相对路径也要确保是相对于当前JS文件的位置，不是相对于html的位置。如果是用了Vite、Rollup这类构建工具的话，按构建工具的常规模块引入规则操作即可，不需要额外调整。
如果你暂时没有用ES模块，还是用全局脚本的方式加载，也可以在父组件的JS代码开头动态插入两个子组件的script标签，但这种方式容易出现加载时序问题，更推荐改用ES模块的方案。

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