diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index a15288521..21342dec3 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -306,10 +306,11 @@ declare module 'vue' {
 
 以下是在非 Vue 构建的自定义元素的 SFC 模板中启用类型检查的推荐方法。
 
-> [!Note]
-> 这种方法是实现该功能的一种可能方式
-> 但具体实现可能因创建自定义元素所用的框架而异。
-
+:::tip 注意
+- 这种方法是实现该功能的一种可能方式
+- 但具体实现可能因创建自定义元素所用的框架而异。
+:::
+ 
 假设我们有一个自定义元素，其中定义了一些 JS 属性和事件，并且它发布在名为 `some-lib` 的库中：
 
 ```ts
@@ -389,11 +390,12 @@ type VueEmit<T extends EventMap> = EmitFn<{
 }>
 ```
 
-> [!Note]
-> 我们将 `$props` 和 `$emit` 标记为已弃用，
-> 以便当我们获取自定义元素的 `ref` 时，我们不会被诱导使用这些属性，
-> 因为这些属性在自定义元素的情况下仅用于类型检查。
-> 这些属性实际上并不存在于自定义元素实例上。
+:::tip 注意
+- 我们将 `$props` 和 `$emit` 标记为已弃用，
+- 以便当我们获取自定义元素的 `ref` 时，我们不会被诱导使用这些属性，
+- 因为这些属性在自定义元素的情况下仅用于类型检查。
+- 这些属性实际上并不存在于自定义元素实例上。
+:::
 
 使用类型助手，我们现在可以选择在 Vue 模板中应暴露的 JS 属性进行类型检查：