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