chore: update

Author: webfansplz

README.md

@@ -9,5 +9,4 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ChallengeList: typeof import('./components/ChallengeList.vue')['default']
   }
-
 }

README.zh-CN.md

@@ -24,6 +24,10 @@
       "text": "Directives",
       "link": "/challenges#category=Directives"
     },
+    {
+      "text": "Event Handling",
+      "link": "/challenges#category=Event%20Handling"
+    },
     {
       "text": "Global API:General",
       "link": "/challenges#category=Global%20API%3AGeneral"
@@ -87,9 +91,21 @@
           "text": "DOM Portal",
           "link": "/questions/13-dom-portal/README"
         },
+        {
+          "text": "Prop Validation",
+          "link": "/questions/323-prop-validation/README"
+        },
         {
           "text": "functional component",
           "link": "/questions/21-functional-component/README"
+        },
+        {
+          "text": "render function[h()]",
+          "link": "/questions/218-h-render-function/README"
+        },
+        {
+          "text": "Tree Component",
+          "link": "/questions/208-tree-component/README"
         }
       ]
     },
@@ -158,6 +174,10 @@
     {
       "text": "Directives",
       "items": [
+        {
+          "text": "Capitalize",
+          "link": "/questions/305-capitalize/README"
+        },
         {
           "text": "Optimize performance directive",
           "link": "/questions/12-optimize-perf-directive/README"
@@ -180,6 +200,19 @@
         }
       ]
     },
+    {
+      "text": "Event Handling",
+      "items": [
+        {
+          "text": "prevent event propagation",
+          "link": "/questions/243-prevent event propagation/README"
+        },
+        {
+          "text": "Key Modifiers",
+          "link": "/questions/232-key-modifiers/README"
+        }
+      ]
+    },
     {
       "text": "Global API:General",
       "items": [

docs/.vitepress/components.d.ts

@@ -1,8 +1,8 @@
-<!--info-header-start--><h1>Hello World <img src="https://img.shields.io/badge/-warm--up-teal" alt="warm-up"/> </h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuY29uc3QgbXNnID0gcmVmKFwiSGVsbG8gV29ybGRcIilcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXY+XG4gICAgPGgxPm1zZzwvaDE+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cbiJ9" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>Hello World <img src="https://img.shields.io/badge/-warm--up-teal" alt="warm-up"/> </h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNpNjDsOwkAMRK9iuYKGFS1aItFxAxo3KHFgpf1Yu06aKHfHJE0qz+h53oIPkcs8Md7Qt74GUWisk3SUQ5JSFRaoPMIKYy0JCO2XkHJfclNI7QP3Pz8RPjnGAq9S40B4puzd7jOTFeUk8a1sDcAPYd6Cxe+1M4t3djfkdubdYYHrDzDkOR0=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 Hello, World!
 
-In Vue.js Challenges, we use the Vue.js SFC Playground based on [vuejs/repl](https://github.com/vuejs/repl) to coding online.
+In Vue.js Challenges, we use the Vue.js SFC Playground based on [vuejs/repl](https://github.com/vuejs/repl) to code online.
 
 For this challenge, you will need to change the following code to make the page show "Hello World" correctly.
 
@@ -14,7 +14,7 @@ const msg = ref("Hello World")
 
 <template>
   <div>
-    <!-- The output of the page expected to be Hello World -->
+    <!-- The output of the page is expected to be Hello World -->
     <h1>msg</h1>
   </div>
 </template>

docs/meta/challenges-nav-menu.json

@@ -1,7 +1,7 @@
-<!--info-header-start--><h1>Lifecycle Hooks <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Composition%20API-999" alt="#Composition API"/> <img src="https://img.shields.io/badge/-%23Lifecycle-999" alt="#Lifecycle"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgcHJvdmlkZSB9IGZyb20gXCJ2dWVcIlxuaW1wb3J0IENoaWxkIGZyb20gXCIuL0NoaWxkLnZ1ZVwiXG5cbmNvbnN0IHZpc2libGUgPSByZWYodHJ1ZSlcbmNvbnN0IHRpbWVyID0gcmVmKG51bGwpXG5jb25zdCBjb3VudCA9IHJlZigwKVxucHJvdmlkZShcInRpbWVyXCIsIHRpbWVyKVxucHJvdmlkZShcImNvdW50XCIsIGNvdW50KVxuXG5mdW5jdGlvbiB0b2dnbGUoKSB7XG4gIHZpc2libGUudmFsdWUgPSAhdmlzaWJsZS52YWx1ZVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8Q2hpbGQgdi1pZj1cInZpc2libGVcIiAvPlxuICAgIDxwPlxuICAgICAgPGJ1dHRvbiBAY2xpY2s9XCJ0b2dnbGVcIj5cbiAgICAgICAgVG9nZ2xlIENoaWxkIENvbXBvbmVudFxuICAgICAgPC9idXR0b24+XG4gICAgPC9wPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG4iLCJDaGlsZC52dWUiOiI8c2NyaXB0IHNldHVwIGxhbmc9XCJ0c1wiPlxuaW1wb3J0IHsgb25Nb3VudGVkLCBpbmplY3QgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgdGltZXIgPSBpbmplY3QoXCJ0aW1lclwiKVxuY29uc3QgY291bnQgPSBpbmplY3QoXCJjb3VudFwiKVxuXG5vbk1vdW50ZWQoKCkgPT4ge1xuICB0aW1lci52YWx1ZSA9IHdpbmRvdy5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgY291bnQudmFsdWUrK1xuICB9LCAxMDAwKVxufSlcblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8cD5cbiAgICAgIENoaWxkIENvbXBvbmVudDoge3sgY291bnQgfX1cbiAgICA8L3A+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cbiJ9" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>Lifecycle Hooks <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Composition%20API-999" alt="#Composition API"/> <img src="https://img.shields.io/badge/-%23Lifecycle-999" alt="#Lifecycle"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNqNUrtygzAQ/JWLKmdMwGk92JOMqxTpUqqxQThKhKQREi4Y/j2nB/hVxN3pdrVadhnIu9Z57xhZk7KrDNcWOmadBrGXxw0ltqNkSyVvtTIWBjCsyUAb1fOawQiNUS1QggKUzKzdNxf1BOVFOPo3PIXKSsnOQs87fhAMNl5xYY1jzxNkectMAqQTYgYq5aRNwAq3ycYCXforlGTx7hUULnkoDAhR2ThZWa4kWHU8CrZ4hoFKmCzl/V44b+zpakHlSGVZxIwwETxY1mqxtwxPAGXN+zDgGAPoX3iDCSYVSqCYcJ0GHA/OWnTyVgle/fq8g6WQeWQAfIVVSnWnMGPJ8JMmhSJKTNpFFC+L6KcsLlySjMxlPFq4kp8+OFZnwOUPq+xd67e9Rdq5lbv+ZkLqJpQyv7PAPjbbWElQmAs5cVmrU452P5BocH3Jhagf2culX40ZvK5W/lcZwxsP1neu5ybzNQxD+ooR/4b/8x7/AAjTI4w=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-For this challenge, you'll use `Composition API: Lifecycle Hooks` to finish it. 
+For this challenge, you'll use the `Composition API: Lifecycle Hooks` to complete the challenge. 
 Here's what you need to implement 👇: 
 
 ```vue
@@ -15,7 +15,7 @@ const count = inject('count')
 
 
 onMounted(() => {
-  // The timer'll work unnormally while toggle child component,Let's go to fixed it.
+  // The timer will work abnormally when the child component is toggled. Lets fix it.
   timer.value = window.setInterval(() => {
     count.value++
   }, 1000)

docs/meta/challenges.json

@@ -1,9 +1,9 @@
-<!--info-header-start--><h1>Next DOM update flush <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Global%20API%3AGeneral-999" alt="#Global API:General"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuXG5jb25zdCBjb3VudCA9IHJlZigwKVxuXG5mdW5jdGlvbiBpbmNyZW1lbnQoKSB7XG4gIGNvdW50LnZhbHVlKytcblxuICAvKipcbiAgICogRE9NIG5vdCB5ZXQgdXBkYXRlZCwgaG93IHRvIG1ha2Ugc3VyZSB0aGUgRE9NIHVkcGF0ZWRcbiAgICogTWFrZSB0aGUgb3V0cHV0IHRvIGJlIHRydWVcbiAgKi9cblxuICBjb25zb2xlLmxvZygrZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJjb3VudGVyXCIpLnRleHRDb250ZW50ID09PSAxKVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBpZD1cImNvdW50ZXJcIiBAY2xpY2s9XCJpbmNyZW1lbnRcIj5cbiAgICB7eyBjb3VudCB9fVxuICA8L2J1dHRvbj5cbjwvdGVtcGxhdGU+XG4ifQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>Next DOM update flush <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Global%20API%3AGeneral-999" alt="#Global API:General"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNpNUMtugzAQ/JWRTwmpoL1WUPV56KHqD/hCzCZBAdsy66QR4t+7hrTKxdbsjMezM6oX7/NTJPWoysGE1jMG4uiftG177wJjRKAdJuyC66GVaLXSVlvj7MAwLlpGlTSr+3Wa76I13DqL1ppAPVlerTFqi0Wbn+ou0maTpECRZelChvfvL7QDrGNciBF9UzM1dzi4M0xtcSb09ZEwxEDgQ81y0PxqTzz86a9mX0mZeBfZR8ZWUJDgwmbF8nOK7zrKO7dfbRpnYkqai9dHN4d+vXw2K63mzBS0WudMP/zmBKWFqwoPsu6kbVksvUljAph630kSQUC5jcypiaa6ccKz6VpzlNF/Q1rNemAcr41O4iwGxeIgbFncWKvpF/MXmCU=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-When you mutate reactive state in `Vue.js`, the resulting DOM updates are not applied synchronously. 
+When you mutate a reactive state in `Vue.js`, the resulting DOM updates are not applied synchronously. 
 
-`Vue.js` provides a utility for waiting for the next DOM update flush, Let's Go 👇: 
+`Vue.js` provides a utility for waiting for the next DOM update flush. Lets Go 👇: 
 
 ```vue
 <script setup>
@@ -15,8 +15,8 @@ function increment() {
   count.value++
 
   /**
-   * DOM not yet updated, how to make sure the DOM udpated
-   * Make the output to be true
+   * DOM is not yet updated, how can we make sure that the DOM gets updated
+   * Make the output be true
   */
 
   console.log(+document.getElementById("counter").textContent === 1)

docs/questions/1-hello-word/README.md

@@ -1,9 +1,9 @@
-<!--info-header-start--><h1>Optimize performance directive <img src="https://img.shields.io/badge/-medium-d9901a" alt="medium"/> <img src="https://img.shields.io/badge/-%23Directives-999" alt="#Directives"/> <img src="https://img.shields.io/badge/-%23Built--ins-999" alt="#Built-ins"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuXG5jb25zdCBjb3VudCA9IHJlZigwKVxuXG5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gIGNvdW50LnZhbHVlKytcbn0sIDEwMDApXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8c3Bhbj5NYWtlIGl0IG5ldmVyIGNoYW5nZToge3sgY291bnQgfX08L3NwYW4+XG48L3RlbXBsYXRlPlxuIn0=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>Optimize performance directive <img src="https://img.shields.io/badge/-medium-d9901a" alt="medium"/> <img src="https://img.shields.io/badge/-%23Directives-999" alt="#Directives"/> <img src="https://img.shields.io/badge/-%23Built--ins-999" alt="#Built-ins"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNpNjTEOgzAQBL+ycgUiIqRFgJQyRX7gxkJHggKHZc40lv8eW6RIuavZnaDu1taHJ9Wqbh/dbAU7ibeD5nm1mxMEOJoQMblthVaJ1Uqz5nHjXTBungV9ZoqmzH2aP1jIHWYpihL9gKAZJ1in0lNVaY4X3JomL7rr6U3GFIRWuxihlIBut4aHp/kQZgHTQQ7j2/CLWoTwc8eYHjKXr/7mKn4BPe9M6A==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-`Vue.js` provides a directive so that render the element and component once only, and skip future updates.
+`Vue.js` provides a directive that renders the element and the component only once, and skips future updates.
 
-Do you know what's it, Let's try it 👇: 
+Do you know what the directive is?. Lets try it 👇: 
 
 ```vue
 <script setup>
@@ -17,7 +17,7 @@ setInterval(() => {
 </script>
 
 <template>
-  <span>Make it never change: {{ count }}</span>
+  <span>Make it not to change: {{ count }}</span>
 </template>
 
 ```

docs/questions/10-lifecycle/README.md

@@ -1,9 +1,9 @@
-<!--info-header-start--><h1>DOM Portal <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Components-999" alt="#Components"/> <img src="https://img.shields.io/badge/-%23Built--ins-999" alt="#Built-ins"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cblxuY29uc3QgbXNnID0gXCJIZWxsbyBXb3JsZFwiXG5cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDwhLS0gUmVuZGVycyBpdHMgdG8gYSBjaGlsZCBlbGVtZW50IG9mIHRoZSBgYm9keWAgLS0+XG4gIDxzcGFuPnt7IG1zZyB9fTwvc3Bhbj5cbjwvdGVtcGxhdGU+XG4ifQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>DOM Portal <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Components-999" alt="#Components"/> <img src="https://img.shields.io/badge/-%23Built--ins-999" alt="#Built-ins"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNpNjbsOwjAUQ3/FZA/sKFRiY2ZhydDSXGilvJTcIqEo/07TLoyWfXyKuMZ4/CwkzkLlMc2RkYmX2Gmv/Rh8Zrj8xgVa3MjagEdI1mjRanXaiW2rmFy0A9OaAHWQEnfyhlLGzOCAAeM0WwOy5Mgzwgs8EfpnMN8eUu5cjoPvStmkta6Glpvq717UH8iwP00=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
 `Vue.js` provides a built-in component that renders its slot content to another part of the `DOM`. 
 
-Do you know what's it, Let's try it 👇: 
+Do you know the built-in component?. Lets try it 👇: 
 
 ```vue
 <script setup>
@@ -13,7 +13,7 @@ const msg = "Hello World"
 </script>
 
 <template>
-  <!-- Renders its to a child element of the `body` -->
+  <!-- Renders it to a child element of the `body` -->
   <span>{{ msg }}</span>
 </template>
 

docs/questions/11-next-dom-update/README.md

@@ -1,9 +1,9 @@
-<!--info-header-start--><h1>Dynamic css values <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23CSS%20Features-999" alt="#CSS Features"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuY29uc3QgdGhlbWUgPSByZWYoXCJyZWRcIilcblxuY29uc3QgY29sb3JzID0gW1wiYmx1ZVwiLCBcInllbGxvd1wiLCBcInJlZFwiLCBcImdyZWVuXCJdXG5cbnNldEludGVydmFsKCgpID0+IHtcbiAgdGhlbWUudmFsdWUgPSBjb2xvcnNbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNCldXG59LCAxMDAwKVxuXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cD5oZWxsbzwvcD5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4vKiBNb2RpZnkgdGhlIGNvZGUgdG8gYmluZCB0aGUgZHluYW1pYyBjb2xvciAqL1xucCB7XG4gIGNvbG9yOiByZWRcbn1cbjwvc3R5bGU+XG4ifQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
+<!--info-header-start--><h1>Dynamic css values <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23CSS%20Features-999" alt="#CSS Features"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eNpNUEFuhDAM/IqVE6AVUKmnFYvUYw/7gk0PLDEFKcRRErZCiL/XSVSpN3vsGc/4EB/W1q8NxVV0fnSLDeAxbLaXZlktuQAHOJzghMnRClLwrhTSjGR8gDDjinCLG4UUDpUUpTR/05E0Oc/jhxRPHXkXFthRa/rJdWLE4tshGim+Ipnvf5qA7jXooijh1sMhDeRbNYNbvJi1H/chzPWkiVyRSjcYRSuzKngvWe28wFvbtslU1+SAHI2bgKvVQ0DuADrbz9FW18TgXfNvyK0Pu0bwI1lUjDQV3Ekt0x4tsRGFEAiei1EJULsZ1mXMDqFqpLE5QAKu/CvFvpKdqMuC4vwFPjyGKQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-SFC `<style>` tags support linking CSS values to dynamic component.
+SFC `<style>` tags support linking CSS values to dynamic components.
 
-Do you know what's it, Let's try it 👇: 
+Do you know what it is?. Lets try it 👇: 
 
 ```vue
 <script setup>