Access the Parent Element — hostElement

同学们，今天我们来聊聊LWC中一个很贴心的小工具，叫做`hostElement`。 你们可能遇到过这样的情况：想拿到组件自己的那个外层HTML元素，也就是宿主元素。以前呢，如果你是影子DOM模式，得用`this.template.host`；但要是你切到了轻型DOM模式，`this.template`直接就空了，就碰不到宿主了。是不是挺头疼的？代码每次都要判断模式，很麻烦。 好消息是，从API版本62.0开始，Salesforce给我们提供了一个统一的属性，就叫`hostElement`。不管你的组件用的是影子DOM还是轻型DOM，`this.hostElement`都能稳稳地返回那个宿主元素。在影子DOM下它等于`this.template.host`；在轻型DOM下它照样工作，不会因为`this.template`为空就罢工。这样你就不用关心渲染模式，写法统一了。 有什么用呢？比如你想获取组件的标签名，用`this.hostElement.tagName`；或者在宿主上设置属性；或者和父组件传个信；再或者要跟某个需要宿主DOM节点的外部库对接，都很直接。所以，从今往后，要访问宿主元素，就记住用`this.hostElement`，它就是我们跨越DOM模式的首选方式。 简单吧？记住这一点，代码就能更干净、更健壮了。好了，这一小节就到这里，有什么问题随时问。