什么是Web组件？

Web组件是一组Web平台API，允许您创建新的自定义，可重用，封装的HTML标记，以便在网页和Web应用程序中使用。自定义组件和小部件构建在Web组件标准之上，可以在现代浏览器中使用，并且可以与任何使用HTML的JavaScript库或框架一起使用。

Web组件基于现有Web标准。支持Web组件的功能目前正在添加到HTML和DOM规范中，让Web开发人员可以使用封装样式和自定义行为的新元素轻松扩展HTML。

产品规格

Web组件基于四个主要规范：

自定义元素

Custom Elements规范为设计和使用新类型的DOM元素奠定了基础。

影子DOM

shadow DOM规范定义了如何在Web组件中使用封装样式和标记。

ES模块

ES模块规范以基于标准，模块化，高性能的方式定义JS文档的包含和重用。

HTML模板

HTML模板元素规范定义了如何声明在页面加载时未使用的标记片段，但可以在运行时稍后实例化。

我如何使用Web组件？

此站点上的组件提供了可在Web页面和Web应用程序中使用的新HTML元素。

使用自定义元素就像导入它一样简单，并使用HTML文档中的新标记。例如，要使用paper-button元素：

<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>

有许多方法可以安装自定义元素。当您找到要使用的元素时，请查看其README以获取安装它的命令。今天的大多数元素都可以与NPM一起安装。 NPM还处理安装组件的依赖项。有关NPM的更多信息，请参阅npmjs.com。

例如，纸张按钮概述描述了使用npm的安装过程：

mkdir my-new-app && cd my-new-app
npm install --save @polymer/paper-button

如何定义新的HTML元素？

本节介绍Web组件规范的跨浏览器版本的语法。

使用JavaScript通过customElements全局定义新的HTML元素及其标记。使用您要创建的标记名称调用customElements.define（）以及扩展基本HTMLElement的JavaScript类。

例如，要定义移动抽屉面板，<app-drawer>：

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

要使用新标签：

<app-drawer></app-drawer>

使用自定义元素与使用<div>或任何其他元素没有什么不同。可以在页面上声明实例，在JavaScript中动态创建，可以附加事件侦听器等。

<script>
// Create with javascript
var newDrawer = document.createElement('app-drawer');
// Add it to the page
document.body.appendChild(newDrawer);
// Attach event listeners
document.querySelector('app-drawer').addEventListener('open', function() {...});
</script>

创建和使用阴影根 （ shadow root）

本节介绍使用shadow DOM规范的新跨浏览器版本（v1）创建shadow DOM的语法。 Shadow DOM是一种新的DOM功能，可帮助您构建组件。您可以将shadow DOM视为元素中的作用域子树。

影子根是一个附加到“host”元素的文档片段。附加阴影根的行为是元素如何获得其阴影DOM。要为元素创建shadow DOM，请调用element.attachShadow（）：

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header

用于构建Web组件的库

已经存在许多库，可以更轻松地构建Web组件。该网站的图书馆部分有其他详细信息，但您可以尝试以下内容：

1. Hybrids 是一个用于使用简单和功能API创建Web组件的UI库。
2. LitElement 使用lit-html渲染到元素的Shadow DOM中，并添加API以帮助管理元素属性和属性。
3. Polymer 提供了一组用于创建自定义元素的功能。
4. Slim.js是一个opensource轻量级Web组件库，它使用es6本机类继承为组件提供数据绑定和扩展功能。
5. Stencil i是一个开源编译器，可生成符合标准的Web组件。

原文:https://www.webcomponents.org/introduction