什么是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组件。该网站的图书馆部分有其他详细信息，但您可以尝试以下内容：
- Hybrids 是一个用于使用简单和功能API创建Web组件的UI库。
- LitElement 使用lit-html渲染到元素的Shadow DOM中，并添加API以帮助管理元素属性和属性。
- Polymer 提供了一组用于创建自定义元素的功能。
- Slim.js是一个opensource轻量级Web组件库，它使用es6本机类继承为组件提供数据绑定和扩展功能。
- Stencil i是一个开源编译器，可生成符合标准的Web组件。
原文:https://www.webcomponents.org/introduction