什么是Web组件？ (What are Web Components?)

Web components are custom, reusable web elements which encapsulate functionality, markup structure and styling by using vanilla javascript/HTML/CSS along with native Web APIs.

Web组件是可重用的自定义Web元素，它们通过使用原始javascript / HTML / CSS以及本机Web API来封装功能，标记结构和样式。

Custom elements teach the browser new tricks while preserving the benefits of HTML

自定义元素在保持HTML优势的同时，教给浏览器新技巧

— Eric Bidelman

— 埃里克·比德尔曼 ( Eric Bidelman)

They can be used in the template like common HTML elements (e.g.<p> or <span> ).

它们可以像通用HTML元素(例如<p>或<span> )一样在模板中使用。

<body>
  <p>a simple paragraph</p>  <script type="module" src="my-custom-element.js"></script>
  <my-custom-element></my-custom-element>
</body>

They build upon ECMAScript 2015 class syntax by extending the HTMLElement interface, that ships useful APIs for manipulating the element or responding to events.

它们通过扩展HTMLElement接口建立在ECMAScript 2015类语法的基础上，该接口提供了用于操纵元素或响应事件的有用API 。

class MyCustomElement extends HTMLElement {}

You can also extend existing HTML elements like HTMLInputElement, HTMLButtonElement, or HTMLParagraphElement to inherit their properties and methods. Thereby you’re able to create your own implementations of common HTML elements.

您还可以扩展现有HTML元素(如HTMLInputElement ， HTMLButtonElement或HTMLParagraphElement以继承其属性和方法。因此，您可以创建自己的通用HTML元素实现。

生命周期挂钩 (Life Cycle Hooks)

There are a few predefined callback functions you can use for reacting to specific life cycle events, like

您可以使用一些预定义的回调函数来响应特定的生命周期事件，例如

connectedCallback — this callback is called whenever your element is inserted into the DOM
connectedCallback每当您的元素插入DOM时，都会调用此回调
disconnectedCallback — is called whenever the element is removed from the DOM tree
disconnectedCallback每当从DOM树中删除元素时调用

These callbacks are useful for safely fetching/accessing data or running some clean up code.

这些回调对于安全地获取/访问数据或运行一些清理代码很有用。

影子DOM (Shadow DOM)

The encapsulation of the styling and markup structure is achieved by attaching a so called Shadow DOM to your web component, which creates a hidden DOM tree beneath your custom HTML element.

样式和标记结构的封装是通过将所谓的Shadow DOM附加到您的Web组件来实现的，该组件在您的自定义HTML元素下创建了一个隐藏的DOM树。

Shadow DOM in rendered HTML — Shadow DOM visible Chrome DevTools elements tab

The Shadow DOM is useful when the components markup and style should remain unaffected by global style definitions.

当组件标记和样式应不受全局样式定义的影响时，Shadow DOM很有用。

浏览器支持 (Browser Support)

Web components are supported by all modern browsers like Chrome, Firefox and Opera (for Edge, Safari and IE11 you can use polyfills).

所有现代浏览器(例如Chrome，Firefox和Opera)都支持Web组件(对于Edge，Safari和IE11，您可以使用polyfills )。

构架 (Frameworks)

There are a few frameworks, which will accelerate your web component development, like Polymer or Hybrids. Before adding the framework of your choice to your project try to evaluate whether you’ll really need this additional dependency.

有一些框架可以加速您的Web组件开发，例如Polymer或Hybrids 。在将选择的框架添加到项目中之前，请尝试评估您是否真的需要此附加依赖项。

In case you want to create just a few simple components and not an entire component library, you should take the no-framework-path.

如果只想创建几个简单的组件而不是整个组件库，则应采用no-framework-path。

实施Web组件 (Implementing a Web Component)

After clarifying all the necessary fundamentals let’s get our hands dirty and implement a vanilla web component. The goal is to create a basic web component, which contains encapsulated styles/markup and which can be easily extended.

弄清所有必要的基础知识之后，让我们动手做一个简单的Web组件。目标是创建一个基本的Web组件，其中包含封装的样式/标记，并且可以轻松地对其进行扩展。

At the end of this article you’ll also find a link to my simple web component template repository.

在本文的结尾，您还将找到一个指向我的简单Web组件模板存储库的链接。

建立 (Setup)

For the purpose of demonstration we’ll create a simple web page where our custom web element will be used.

为了进行演示，我们将创建一个简单的网页，其中将使用我们的自定义Web元素。

To check whether our custom element works as expected, I’ll use the tool serve to host our simple web page.

要检查我们的自定义元素是否按预期工作，我将使用该工具用来承载我们简单的网页。

With serve you’ll just have to run the serve . command in the directory where your simple web page resides to boot up a web server, that hosts it on localhost:5000.

使用发球区，您只需运行serve . 简单网页所在目录中的命令来启动Web服务器，该服务器将其托管在localhost:5000 。

基金会 (The Foundation)

First we’ll extend the HMTMLElement interface to get the required APIs and to register our class as a custom element, so we can use it in our example HTML page.

首先，我们将扩展HMTMLElement接口以获取所需的API并将类注册为自定义元素，因此可以在示例HTML页面中使用它。

Now you can already add it to the web page by importing the javascript file and by inserting the html tag, which we’ve defined in the customElements.define()call as the first argument.

现在，您已经可以通过导入javascript文件并插入html标签(将我们在customElements.define()调用中定义为第一个参数customElements.define()将其添加到网页中。

Do not forget to import the javascript file as type="module" otherwise it won’t get loaded.

不要忘记将javascript文件导入为type="module"否则将不会被加载。

Now we’ve already fulfilled the required steps for utilizing our own web component. Of course, our custom element doesn’t have any content yet but we’re going to change that in the next section.

现在，我们已经完成了利用我们自己的Web组件的必要步骤。当然，我们的custom元素还没有任何内容，但是我们将在下一部分中对其进行更改。

With this solid foundation we’ll continue and add encapsulated markup structure and styles to our custom element by using the Shadow DOM APIs.

在这个坚实的基础上，我们将继续使用Shadow DOM API将封装的标记结构和样式添加到我们的自定义元素中。

使用影子DOM (Using the Shadow DOM)

As already mentioned the Shadow DOM is a hidden DOM tree, which is attached to your custom element. This ensures that the styles of our custom element aren’t affected by global or another elements styles.

如前所述，Shadow DOM是一个隐藏的DOM树，它附加到您的自定义元素上。这样可以确保我们的自定义元素的样式不受全局或其他元素样式的影响。

Let’s attach a Shadow DOM to our custom element. We’ll do that in the constructor and choose open as our desired encapsulation mode.

让我们将Shadow DOM附加到我们的自定义元素上。我们将在constructor执行此操作，然后选择open作为所需的封装模式。

When setting the encapsulation mode to open we’re making sure that our Shadow DOM child elements are accessible via javascript.

将封装模式设置为open我们确保可以通过JavaScript访问Shadow DOM子元素。

Next we should add a template and some styles to our custom element.

接下来，我们应该向我们的自定义元素添加一个模板和一些样式。

Notice that our markup structure resides in a<template> HTML element, which won’t get displayed on the rendered web page.

请注意，我们的标记结构位于<template> HTML元素中，该元素不会显示在呈现的网页上。

The web page should now display the custom element.

网页现在应显示自定义元素。

Now, to prove that our custom styles are encapsulated and not affected by the global styles, we add global styles and a simple heading element to our index.html file.

现在，为了证明我们的自定义样式已封装并且不受全局样式的影响，我们向index.html文件中添加了全局样式和一个简单的heading元素。

The web page renders the two headings but with different styles.

网页呈现两个标题，但样式不同。

You’ve just created a simple, custom web element with encapsulated style by using just vanilla javascript. Use it as a starting point and extend it to your preferences to create your own unique web elements.

您刚刚使用香草JavaScript创建了一个具有封装样式的简单自定义Web元素。使用它作为起点并将其扩展到您的首选项，以创建自己的独特Web元素。

You can find the whole example here:

您可以在此处找到整个示例：