继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

W3C web components 简介

resharpe
关注TA
已关注
手记 102
粉丝 7244
获赞 3476
何谓 web components?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Web组件是一组Web平台API,允许您在Web页面和Web应用程序中创建新的定制的、可重用的、封装的HTML标记。基于Web组件标准的自定义组件和小部件将在现代浏览器中工作,并且可以与任何与HTML一起使用的JavaScript库或框架一起使用。

Web组件基于现有的Web标准。支持Web组件的特性目前正在添加到HTML和DOM规范中,允许Web开发人员轻松地使用封装样式和自定义行为的新元素来扩展HTML。
内容简介

web components 基于四个主要内容

  • custom elements: 自定义元素

    应用新dom元素的基础

  • shadow dom: 影子dom

    决定在自定义元素里如何应用内连样式和标记

  • html imports: html 导入

    决定html文档的复用性

  • html templates: html 模版

    决定如何声明在页面加载时未使用的标记片段,但可以在运行时实例化。

如何应用

应用和导入自定义组建一样简单,如下

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

有很多安装自定义元素的方式,当你发现自己需要的元素时,查阅其安装的README。多数元素可以通过bower安装。

如何定义一个新元素

如下部分描述了跨浏览器组建的构建,应用js定义一个新html元素。

//<app-drawer>:
class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
//document.registerElement() 
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

使用:与使用原生元素并无两样

<app-drawer></app-drawer>
创建与使用shadow root

一个shadow root是关联到host元素的文档片段,创建shadow dom为一个元素,call element.attachShadow()

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header
构建web components的库 参考链接 http://www.ruanyifeng.com/blog/2017/06/custom-elements.html
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP