feat: polish the docs

src/docs/lifecycle.en-US.md

@@ -1,7 +1,7 @@
 ## Lifecycle
-`Quarkc` 对外提供了如下几个生命周期：
+`Quarkc` provides lifecycle methods to help you manage the component.
 
-| 生命周期方法                         | 调用时机                                                                                                                                                                                                                                                                                      |
+| Method Name                          | Trigger Timing                                                                                                                                                                                                                                                                                |
 | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `componentDidMount`                  | Invoked after `connectedCallback` triggered and the component finishes first rendering (mounted, inserted into th e `dom` tree). You can access the `dom` at this time.                                                                                                                       |
 | `shouldComponentUpdate`              | Invoked after `attributeChangedCallback` triggered and before the component rendering. You can decide whether to update the component or not by letting this method return `true` or `false`. *（⚠️ deprecated from v2.0.0 and is not recommended，it will be removed in next major version）* |

src/docs/ref.en-US.md

@@ -1,7 +1,7 @@
 
 ## Ref
 
-通过 `ref` 获取 `dom` 节点实例。
+Access `dom` instance by `ref`.
 
 ```tsx
 import { QuarkElement, customElement, property, state, createRef } from "quarkc"
@@ -13,22 +13,23 @@ class MyComponent extends QuarkElement {
   inputRef: any = createRef()
 
   handleFocus = () => {
-    this.inputRef.current.focus() // 点击手动聚焦 input 框
+    // click to focus on input manually
+    this.inputRef.current.focus()
   }
 
   render() {
     return (
       <div>
         <input ref={this.inputRef}></input>
-        <button onClick={this.handleFocus}>自己输入框聚焦</button>
+        <button onClick={this.handleFocus}>manually focus on input</button>
       </div>
     )
   }
 }
 ```
 
 
-好了，至此您已经学完了有关于 Quarkc 的相关用法。赶紧去试一试吧～
+🎉Congratulations! You have got all the basics of Quark. Let us have a try ~
 
 
-[优秀案例参考](#/zh-CN/docs/example)
+[Great Examples](#/zh-CN/docs/example)

src/docs/slot.en-US.md

@@ -1,5 +1,5 @@
-## Slot 插槽
-### 默认插槽
+## Slot
+### Default Slot
 
 ```tsx
 import { QuarkElement, customElement } from "quarkc"
@@ -18,12 +18,11 @@ class Count extends QuarkElement {
 ```
 
 ```html
-<quark-count>默认插槽</quark-count>
+<quark-count>default slot</quark-count>
 ```
 
-### 具名插槽
-
-组件内部给 `slot` 添加 `name`，外部使用时指定 `name`。
+### Named Slot
+Add `name` property to `slot` element in the component, and specify which slot to use by `slot` property.
 
 ```tsx
 import { QuarkElement, customElement } from "quarkc"
@@ -42,11 +41,10 @@ class Count extends QuarkElement {
 ```
 
 ```html
-<quark-count slot="abc">我是具名插槽</quark-count>
+<quark-count><span slot="abc">my named slot</span></quark-count>
 ```
-### 高级技巧
-
-可以通过 `onslotchange` 事件获取到 `slot` 挂载完成时机。
+### Advanced Usage
+You can access the slot dom instance by `ref` and `onslotchange` event.
 
 ```tsx
 import { QuarkElement, customElement, createRef } from "quarkc"
@@ -58,7 +56,7 @@ class Count extends QuarkElement {
   slotRef = createRef()
 
   onSlotChange = () => {
-    // 此处已获取到 slot 的 dom 实例。
+    // got slot dom instance.
     const { current } = this.slotRef
   }
 
@@ -72,4 +70,4 @@ class Count extends QuarkElement {
 }
 ```
 
-更多 `slot` 插槽使用可参考[Slot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)
+For more exmaples of `slot` you can refer to [this article](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots).

src/docs/slot.zh-CN.md

@@ -42,7 +42,7 @@ class Count extends QuarkElement {
 ```
 
 ```html
-<quark-count slot="abc">我是具名插槽</quark-count>
+<quark-count><span slot="abc">我是具名插槽</span></quark-count>
 ```
 ### 高级技巧
 

src/docs/styles.en-US.md

@@ -1,8 +1,8 @@
 ## Styles
 
-### 独立 css 文件方式
+### Independent CSS File
 
-`Quarkc` 支持独立 `css` 文件的方式开发组件，只需要在 `@customElement` 传入 `style` 即可。
+`Quarkc` supports using independent `CSS` file to development, you only need to pass the `CSS` file's content as `style` property's value to `@customElement`.
 
 ```tsx
 import { QuarkElement, customElement, property } from "quarkc"
@@ -33,11 +33,10 @@ index.css：
 }
 ```
 
-你可能需要相关导入 `css` 文件的插件，比如 `rollup` 的 [rollup-plugin-import-css](https://www.npmjs.com/package/rollup-plugin-import-css)
+you may need a plugin to import `css` files, such as [rollup-plugin-import-css](https://www.npmjs.com/package/rollup-plugin-import-css)
 
 ### CSS In JS
-
-直接在组件内部书写样式。
+Write styles directly in the component.
 
 ```tsx
 import { QuarkElement, customElement } from "quarkc"
@@ -59,11 +58,11 @@ class Count extends QuarkElement {
 }
 ```
 
-推荐使用独立 `css` 文件的方式来开发。
+recommend using the independent `css` file to develop.
 
-### 主题
+### Theme
 
-可以使用 `css` [自定义属性](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)的方式来自定义主题。
+You can use [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to customize the theme.
 
 index.css：
 

src/docs/watchers_computed.en-US.md

@@ -29,7 +29,7 @@ class Count extends QuarkElement {
 }
 ```
 
-### 计算属性
+### Computed
 Create a new property computed from reactive states or properties by `@computed` directive. Different from normal `getter` methods, computed properties will track the changes of its dependencies and updates automatically. As long as its dependecies are not changed, cached value will be used and no computation will be triggered.
 
 ```tsx