useHost() 获取自定义元素宿主

最后更新：2026-10-22

useHost() 在自定义元素内部获取宿主元素（shadow DOM 的宿主），用于操作宿主属性或样式。

📝 语法

const host = useHost()
host.style.border = "1px solid"

返回值：宿主元素（自定义元素标签本身）

修改下面的代码，在预览区实时查看效果：

输出：

显示普通组件说明；在自定义元素内部才能拿到宿主。

ℹ️ 说明 只能与 defineCustomElement 配合使用：普通组件里始终是 null。

💡 提示 需要读写宿主上的属性（如 size、theme）时用它，避免污染内部结构。

⚠️ 注意 不要用宿主操作替代响应式数据流：内部状态仍应由 props/ref 管理。

更多案例即将上线。

Q 普通组件里会报错吗？

A 不会，返回 null，需要判空。

Q 和 this.$el 的区别？

A $el 是组件根元素；useHost 是自定义元素的宿主标签（外层容器）。

Q 能改宿主样式吗？

A 可以：host.style / host.classList，但优先用 props 驱动内部样式。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。