Custom Elements — Import & Use in LWC

同学们，咱们今天聊一下在 LWC 里定义自定义元素的两种模式。这就像你写 HTML 时，有时需要自己造一个特殊标签，比如一个带样式的星星符号，或者一个自定义的进度条。LWC 给你两种方法来实现它。 第一种，叫，内联模式，。意思就是直接在 LWC 组件的这个 JavaScript 文件里，在类定义之前，就用标准 Web 标准的 `customElements.define` 方法把这个元素给注册上。你可以理解成，在这个文件开头顺手就把小工具定义好了，写起来最快。比如你只需要一个很简单的彩色小圆点，只在这一个组件里用一下，那用内联模式就刚刚好，不绕远路。 第二种，叫，单独文件模式，。如果你觉得这个小工具以后还会在其他地方用到，或者它逻辑比较复杂，那就把它拆到自己单独的一个 .js 文件里，就放在组件包里。然后在主组件里用一句 `import './myCustomElement'` 来引入它。这句 import 其实不需要赋值给变量，它就是个副作用导入——一执行，那个文件里的自定义元素就自动在全局注册好了。这样，你的元素定义干净独立，未来别的组件想用，都可以直接这样导入，复用性更强。 两种模式下，你在模板里使用这个自定义标签的时候，都要在标签上加上 `lwc:external` 这个指令，这样 LWC 才会把它当成外部的标准自定义元素来处理，而不是内部的 LWC 组件。 还有一点开发习惯要记住：如果你想在元素创建或者挂载的时候处理一些属性、子元素啥的，，别用构造函数，。推荐你用 `connectedCallback` 或者 `renderedCallback` 来安全操作。如果想监听到某个属性值变化然后做出反应，就用 `attributeChangedCallback` 这个标准回调。这样代码更稳健，不会和 LWC 的渲染周期打架。 简单来说，小工具就地解决，用内联；想长期重复使用的，拆到单独文件，副作用导入。模板里别忘加 `lwc:external`，生命周期用对钩子。好了，这个点讲明白了，下面咱们看看实际例子。