Web API Properties — EventTarget, HTMLElement & Node

好，我们来聊聊LWC组件背后的几个关键Web API。 你可能知道，LWC组件本质上是一个自定义的HTML元素。既然是Web标准的一部分，它就自然继承了一些浏览器内置的能力。具体来说，LWC组件反映了三个核心Web API的属性，再加上它本身的接口，一共是四个。 第一个，来自EventTarget。这让你能在组件上使用完整的事件系统。比如addEventListener添加监听，removeEventListener移除监听，还能用dispatchEvent主动派发事件。这让组件之间的通信非常灵活。 第二个，来自HTMLElement。它给你带来很多布局相关的属性，像offsetHeight、offsetLeft、offsetTop这些，方便你获取元素的大小和位置。还支持contentEditable让元素可编辑，以及data-*自定义属性，不过注意，LWS对这个数据集属性做了一些调整。另外还有hidden、title、lang这些与显示和国际化相关的属性，用起来很顺手。 第三个，来自Node接口。它提供了DOM树导航能力，比如childNodes、firstChild、lastChild，让你能遍历子节点。还有一个很实用的属性叫isConnected，能告诉你这个元素当前是否插入到了DOM中。这在检查某些同步回调时特别有用，能避免操作一个已经不在文档里的元素。 这四个接口加起来，就让LWC组件成了一个完完全全的DOM公民，享有原生元素该有的能力。你可以在组件里像操作普通HTML元素一样，使用这些属性和方法，非常自然。 这样讲，你是不是对LWC组件的底层能力更清楚了呢？