我已经制作了几个 CustomElement，比如按钮、抽屉等...
抽屉依赖于按钮。
使用 javascript 导入/导出模块依赖项由浏览器解析并加载所需的 js 文件，但使用 CustomElement 它们不会导入所需的其他 CustomElements，因为它们是通过 customElements.define('my-drawer',抽屉）；
你如何处理这些依赖关系？您是否添加了伪造的导入导出以便浏览器为您解析依赖项？还是将它们捆绑在一起，即使它们可能并非全部需要？
【问题讨论】：
标签： javascript html custom-element
您可以将子组件导入到父组件中，并在定义之前检查自定义元素是否存在，这样您就不会因多个具有相同名称的自定义元素而出错。
在button.js中（假设是孩子）：
if(!customElements.get('my-button')) customElements.define('my-button')
在drawer.js（父级）中只需导入button.js
【讨论】：
您导入这些依赖项并注册这些元素；对于每一次导入和注册，元素的任何实例都将变为“已定义”并且执行了类代码，这就是 my-complex 在下面的示例中导入它们的原因；它们只需要导入一次，导入更多不会有任何伤害，这就是每个具有依赖项的类都导入它们的原因，这就是每个类自注册以管理样板文件的原因；
// my-button.js
export default class MyButton extends HTMLElement{}
customemElements.get('my-button') ?? customElements.define('my-button', MyButton);
// my-thing.js
export default class MyThing extends HTMLElement{}
customemElements.get('my-thing') ?? customElements.define('my-thing', MyThing);
// my-complex.js
import './my-thing.js';
import './my-button.js';
export default class MyComplex extends HTMLElement{}
// use <my-button> and <my-thing> anywhere, including here
customemElements.get('my-complex') ?? customElements.define('my-complex', MyComplex);
不用担心任何优化，ES 模块会为你做这些，如果你打包让打包器处理它——这不值得考虑；只需添加每个功能所需的所有导入； ESM 完成了剩下的工作——与 serviceworkers 和缓存一起是一个漂亮、简单的平台演进；我们实际上可以摆脱复杂的构建过程，让浏览器完成它的工作
【讨论】：