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>`