Work with Custom Elements — Define & Register

好，同学们，咱们今天来聊聊 LWC 里的一个很特别的话题——自定义元素。听起来有点儿技术，但别担心，我会用最简单的方式让你听明白。 首先你要知道，LWC 的自定义元素，它是完全遵循浏览器原生的 Web 组件规范的。这就意味着你写的这个组件，它就是一个标准的 HTMLElement 子类。注意，必须继承 HTMLElement，而且要用带连字符的唯一名称去注册，就像 my-component 这样，不能用单个单词，这是浏览器要求的。 那它的生命周期呢，其实跟咱们熟悉的 LWC 组件很相似，只是术语更贴近原生的 Web 组件概念。比如，构造函数里我们做初始化、附加影子根；元素被插入到 DOM 树的时候，会触发 connectedCallback；被移除的时候触发 disconnectedCallback。还有一个静态属性叫 observedAttributes，它是一个数组，用来告诉浏览器你要监听哪些属性的变化。当这些属性变化时，就会调用 attributeChangedCallback。还有一个不太常用到的回调叫 adoptedCallback，就是当元素从一个文档移动到另一个文档时触发的，比如调用 adoptNode 的时候。 那么怎么在 LWC 里使用这种自定义元素呢？有两种方式。一种很简单，就在你的 LWC 的 JavaScript 文件里，直接在 export default class 定义之前，写自定义元素的类定义，然后顺便注册它。另一种更模块化一点，你可以把它单独放在组件捆绑包里的一个单独文件里，然后导入到主 JS 文件中使用。这样代码结构更清晰。 有一点要特别注意：自定义元素里的模板，也就是 template 标签，是可选的。如果你不用模板，那就要完全用程序来创建元素内部的 DOM 结构。而且切记，LWC 的 HTML 模板里面是不能放嵌套 template 标签的，这点跟纯 Web 组件可以不同。所以如果你要在 LWC 里使用自定义元素，模板方式就得放下，按照原生方式手动来。 好，关于自定义元素的核心点就这么多。你只要记住，它是标准 Web 组件的那套玩法，生命周期和注册方式都遵循规范，在 LWC 中可以直接内联也可以分开写，但要避免在 HTML 模板里直接用 template 标签。是不是挺简单的？下节课我们拿个例子练练手，这样你就更有感觉了。