useHost() Access the Custom Element Host
Last updated: 2026-10-22
useHost() Access the Custom Element Host
useHost() returns the host element inside a custom element, letting you touch its attributes or styles.
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const host = useHost()
host.style.border = "1px solid"Returns：The host element (the custom element tag)
▶ Example
Edit the code below and see the live result:
Output：
Shows the notice — the host is only available inside custom elements.💡 Key Points
ℹ️ Note Only meaningful alongside defineCustomElement.
💡 Tip Use it to read or write host attributes.
⚠️ Warning Do not replace reactivity with direct host mutation.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does it throw in plain components?
A No — it returns null.
Q Difference from this.$el?
A $el is the component root; useHost is the custom element tag itself.
Q Can I style the host?
A Yes, though props-driven styling is preferable.
