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；