diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index 824adb0b1..b95b3aa02 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -306,9 +306,9 @@ declare module 'vue' {
 
 Vue で構築されていないカスタム要素の SFC テンプレートで型チェックを有効にする推奨の方法をご紹介します。
 
-> [!Note]
-> この方法は、カスタム要素を作成する際に使用するフレームワークによって異なる場合があります。
-
+:::tip Note
+この方法は、カスタム要素を作成する際に使用するフレームワークによって異なる場合があります。
+:::
 
 いくつかの JS プロパティとイベントが定義されたカスタム要素があり、それが `some-lib` というライブラリーに同梱されているとします:
 
@@ -389,11 +389,9 @@ type VueEmit<T extends EventMap> = EmitFn<{
 }>
 ```
 
-> [!Note]
-> 私たちは `$props` と `$emit` を非推奨としました。カスタム要素の `ref` を取得した際に、これらのプロパティを使用したくなる誘惑にかられないようにするためです。これらのプロパティはカスタム要素に関しては型チェックのみに使用されるためです。これらのプロパティは実際にはカスタム要素のインスタンスには存在しません。
-
-
-
+:::tip Note
+私たちは `$props` と `$emit` を非推奨としました。カスタム要素の `ref` を取得した際に、これらのプロパティを使用したくなる誘惑にかられないようにするためです。これらのプロパティはカスタム要素に関しては型チェックのみに使用されるためです。これらのプロパティは実際にはカスタム要素のインスタンスには存在しません。
+:::
 
 型ヘルパーを使用して、Vue テンプレートで型チェックのために公開すべき JS プロパティを選択できます: