useHost() カスタム要素のホスト取得

最終更新：2026-10-22

useHost() はカスタム要素の内部でホスト要素（shadow DOM のホスト）を取得します。ホストの属性やスタイルを操作するために使います。

📝 構文

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

戻り値：ホスト要素（カスタム要素タグそのもの）

以下のコードを編集して結果を確認しましょう：

出力：

Shows the notice — the host is only available inside custom elements.

ℹ️ 補足 defineCustomElement と組み合わせた場合のみ意味があります。普通のコンポーネントでは常に null です。

💡 ヒント ホスト上の属性（size、theme など）を読み書きしたいときに使います。内部構造を汚染しません。

⚠️ 注意 ホストの直接操作でリアクティブなデータフローを置き換えないでください。内部状態は引き続き props/ref で管理します。

Q 普通のコンポーネントでエラーになりますか？

A なりません。null が返るため、null チェックが必要です。

Q this.$el との違いは？

A $el はコンポーネントのルート要素です。useHost はカスタム要素のホストタグ（外側のコンテナ）です。

Q ホストのスタイルを変えられますか？

A 変えられます。host.style / host.classList を使えますが、props で内部スタイルを駆動する方を優先してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。