web components簡介

來源webcomponents 官網簡介，用於個人理解
polymer基於此開發。
angular 不是。

簡介

什麼是web components？

• 是瀏覽器的一部分，瀏覽器需支持。
• 通過一些列web平臺的APIs讓你創造，定製，用於在web網頁中的HTML標籤。create new custom, reusable, encapsulated HTML tags
• 基於Web Component 標準定製的 components and widgets直接用於瀏覽器，可以搭配任何使用HTML的JS庫或框架
• 擴展HTML的elements

主要構成
custom elements 新的DOM elements
Shadow DOM 封裝風格和標記 encapsulated style and markup
HTML imports inclusion and reuse HTML documents
HTML Template 在頁面加載中聲明未使用的標記片段

如何使用
常用的是直接在html頁面導入即可

<link rel="import" href="../emoji-rain/emoji-rain.html">
...
<emoji-rain active></emoji-rain>

如何定義 a new HTML element

目前V1版本，customElements.define()

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

使用

<app-drawer></app-drawer>

或者可以在頁面中聲明，在JS中創建，甚至可以監聽

<script>
// 創建JS
var newDrawer = document.createElement(‘app-drawer’);
// 加入頁面
document.body.appendChild(newDrawer);
// 鏈接listeners
document.querySelector(‘app-drawer’).addEventListener(‘open’, function() {...});
</script>`