docs: Best practices for using Semi ui in web components

Author: YyumeiZhang

content/start/web-components/index-en-US.md

@@ -4,12 +4,12 @@ title: Web Components
 icon: doc-webcomponents
 localeCode: en-US
 order: 10
-brief: Semi Web Components adaptation
+brief: Semi ui 在 web components 中使用的最佳实践
 ---
 
-[Web components]((https://developer.mozilla.org/en-US/docs/Web/API/Web_components)) is a set of techniques for creating reusable custom elements that are compatible across browsers and frameworks , has good encapsulation and reusability, and is widely used in developing browser plug-ins and cross-frame components.
+[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) is a set of techniques for creating reusable custom elements that are compatible across browsers and frameworks , has good encapsulation and reusability, and is widely used in developing browser plug-ins and cross-frame components.
 
-More efficient custom element development can be achieved with the help of component libraries, but the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) technology in web component has <strong>style isolation</strong> and <strong>DOM encapsulation</strong> features can cause some problems when using component library components. Most component libraries cannot work properly in the shadow DOM without additional adaptations. Generally speaking, there will be the following problems:
+More efficient custom element development can be achieved with the help of component libraries, but the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) technology in web components has <strong>style isolation</strong> and <strong>DOM encapsulation</strong> features can cause some problems when using component library components. Most component libraries cannot work properly in the shadow DOM without additional adaptations. Generally speaking, there will be the following problems:
 
 ## Problems
 

content/start/web-components/index.md

@@ -4,12 +4,12 @@ title: Web components 适配
 icon: doc-webcomponents
 localeCode: zh-CN
 order: 10
-brief: Semi 适配 web components
+brief: Best practices for using Semi ui in web components
 ---
 
-[Web components]((https://developer.mozilla.org/en-US/docs/Web/API/Web_components)) 是一套用于创建可重用自定义元素的技术，可实现跨浏览器和框架兼容，具备良好的封装性和可重用性，被广泛应用于开发浏览器插件、跨框架的组件中。
+[Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) 是一套用于创建可重用自定义元素的技术，可实现跨浏览器和框架兼容，具备良好的封装性和可重用性，被广泛应用于开发浏览器插件、跨框架的组件中。
 
-借助组件库可实现更高效的自定义元素开发，但是 web component 中的 [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) 技术具备的<strong>样式隔离</strong>和 <strong>DOM 封装</strong>特性会给组件库组件的使用带来一些问题。大多数组件库如果不做额外适配，都无法正常在 shadow DOM 内正常工作，一般来说会存在以下问题：
+借助组件库可实现更高效的自定义元素开发，但是 web components 中的 [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) 技术具备的<strong>样式隔离</strong>和 <strong>DOM 封装</strong>特性会给组件库组件的使用带来一些问题。大多数组件库如果不做额外适配，都无法正常在 shadow DOM 内正常工作，一般来说会存在以下问题：
 
 ## 问题