docs: replace the NOTE block in web-components.md

-原仓库，非法的格式导致中文库无法通过 [zhlint action](https://github.com/vuejs-translations/docs-zh-cn/actions/runs/13483034882/job/37670671309)

后续将同步到英文库，该问题由  #1063  带入。

Author: veaba

src/guide/extras/web-components.md

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