Web Components
Web Components （Web组件）
In this section, we are going to discover the modern standards of web components. Some of the features are supported by the HTML/DOM standard, but most of them are still under development. （在本节中，我们将了解Web组件的现代标准。 HTML/DOM标准支持某些功能，但大多数功能仍在开发中。）
The Architecture of the Component
The Architecture of the Component （组件的架构）
The idea of the component is widely applied in frameworks and elsewhere. The most famous rule for developing complex software is that it’s not recommended to create complex software. （组件的概念在框架和其他地方被广泛应用。 开发复杂软件最著名的规则是不建议创建复杂的软件。）
Once it turns to be complex, then you should split it into simpler parts, connecting in the most evident way. （一旦它变得复杂，你应该把它分成更简单的部分，以最明显的方式连接。）
The most efficient architecture is making the complex simple. （最有效的架构是让复杂变得简单。）
The user interface can be split into visual components. （用户界面可以拆分为可视化组件。）
It includes the Top navigation, User information, Follow suggestions, Submit form, and messages. （它包括顶部导航、用户信息、关注建议、提交表单和消息。）
Components encompass subcomponents. For instance, a clickable user picture can also be considered a component. （组件包括子组件。例如，可点击的用户图片也可以被视为组件。）
As a rule, a component is a separate visual entity, which can be described in terms of how it interacts with the page. （通常，组件是一个单独的可视化实体，可以用它与页面的交互方式来描述。）
Any component should have:
Its JavaScript Class （-其JavaScript类）
DOM structure, handled only by its class （- DOM结构，仅由其类处理）
CSS styles, that are applied to the component （-应用于组件的CSS样式）
API: class methods, events for interacting with other components.
There are multiple development methodologies and frameworks for building components. （构建组件有多种开发方法和框架。）
Built-in browser capabilities are provided by web components for that. For defining custom HTML elements are used Custom Elements. For creating an internal DOM for the component, which is concealed from others- Shadow Dom. （为此， Web组件提供了内置浏览器功能。 使用自定义元素来定义自定义HTML元素。 用于为组件创建对其他人隐藏的内部DOM - Shadow DOM。）
For declaring styles that are only used inside the component’s Shadow DOM-CSS Scoping. （用于声明仅在组件的阴影DOM-CSS作用域内使用的样式。）
Minor stuff and Event Targeting for making custom elements better suit the development. （用于使自定义元素更好地适应开发的次要内容和事件定位。）