web components · FA+Ecloud互联网应用开发平台综合技术入门指南(READ)

## 一、概述 Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。 WebComponent用`<template>`包裹 HTML 和样式代码，用 `<script>` 将这些绑定到自定义标签上。包含以下四个规范； HTML Imports、HTML Template、Shadow DOM及Custom Elements四个子规范； ![](https://img.kancloud.cn/7d/2d/7d2de262979e0eddaaa6d0be720ee83b_1023x298.png) ## 二、简述 HTML Imports：定义在文档中导入其他HTML文档的方式； ~~~xml <link rel="import" href="components.html"> ~~~ HTML Template：HTML内的DOM模板，在`<template>`元素内声明。 ~~~javascript <body> <hello-button>hello</hello-button> </body> <script> (function() { var HelloButtonPrototype = Object.create(HTMLElement.prototype); HelloButtonPrototype.who = function() { alert('Hello!'); } HelloButtonPrototype.createdCallback = function() { this.addEventListener('click', function(e) { HelloButtonPrototype.who(); }); } document.registerElement('hello-button', {prototype: HelloButtonPrototype}); })(); </script> ~~~ Shadow DOM：组合对DOM和样式的封装； Custom Elements：定义新`HTML`元素的一系列API；