组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。
本文就介绍 HTML 组件的基础知识：自定义元素（custom elements）。
文章结尾还有一则 React 培训消息（含 React Native），欢迎关注。
一、浏览器处理
我们一般都使用标准的 HTML 元素。
<p>Hello World</p>
上面代码中，<p>就是标准的 HTML 元素。
如果使用非标准的自定义元素，会有什么结果？
<greeting>Hello World</greeting>
上面代码中，<greeting>就是非标准元素，浏览器不认识它。这段代码的运行结果是，浏览器照常显示Hello World，这说明浏览器并没有过滤这个元素。
现在，为自定义元素加上样式。
greeting {
display: block;
font-size: 36px;
color: red;
}
运行结果如下。
接着，使用脚本操作这个元素。
function customTag(tagName, fn){
Array
.from(document.getElementsByTagName(tagName))
.forEach(fn);
}
function greetingHandler(element) {
element.innerHTML = '你好，世界';
}
customTag('greeting', greetingHandler);
运行结果如下。
这说明，浏览器对待自定义元素，就像对待标准元素一样，只是没有默认的样式和行为。这种处理方式是写入 HTML5 标准的。
"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."
上面这段话的意思是，浏览器必须将自定义元素保留在 DOM 之中，但不会任何语义。除此之外，自定义元素与标准元素都一致。
事实上，浏览器提供了一个HTMLUnknownElement对象，所有自定义元素都是该对象的实例。
var tabs = document.createElement('tabs');
tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true
上面代码中，tabs是一个自定义元素，同时继承了HTMLUnknownElement和HTMLElement接口。
二、HTML import
有了自定义元素，就可以写出语义性非常好的 HTML 代码。
<share-buttons>
<social-button type="weibo">
<a href="...">微博</a>
</social-button>
<social-button type="weixin">
<a href="...">微信</a>
</social-button>
</share-buttons>
上面的代码，一眼就能看出语义。
如果将<share-buttons>元素的样式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就可以复用了。
使用的时候，先引入share-buttons.html。
<link rel="import" href="share-buttons.html">
然后，就可以在网页中使用<share-buttons>了。
<article> <h1>Title</h1> <share-buttons/> ... ... </article>
HTML imports 的更多用法可以参考教程（1，2）。目前只有 Chrome 浏览器支持这个语法。
三、Custom Elements 标准
HTML5 标准规定了自定义元素是合法的。然后，W3C 就为自定义元素制定了一个单独的 Custom Elements 标准。
它与其他三个标准放在一起---- HTML Imports，HTML Template、Shadow DOM----统称为 Web Components 规范。目前，这个规范只有 Chrome 浏览器支持。
Custom Elements 标准对自定义元素的名字做了限制。
"自定义元素的名字必须包含一个破折号（-）所以<x-tags>、<my-element>和<my-awesome-app>都是正确的名字，而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素。"
注意，一旦名字之中使用了破折号，自定义元素就不是HTMLUnknownElement的实例了。
var xTabs = document.createElement('x-tabs');
xTabs instanceof HTMLUnknownElement // false
xTabs instanceof HTMLElement // true
Custom Elements 标准规定了，自定义元素的定义可以使用 ES6 的class语法。
// 定义一个 <my-element></my-element>
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
上面代码中，原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数，第一个参数是自定义元素的名字，第二个参数是一个 ES6 的class。
这个class使用get和set方法定义 Custom Element 的某个属性。
class MyElement extends HTMLElement {
get content() {
return this.getAttribute('content');
}
set content(val) {
this.setAttribute('content', val);
}
}
有了这个定义，网页之中就可以插入<my-element>了。
<my-element content="Custom Element"> Hello </my-element>
处理脚本如下。
function customTag(tagName, fn){
Array
.from(document.getElementsByTagName(tagName))
.forEach(fn);
}
function myElementHandler(element) {
element.textConent = element.content;
}
customTag('my-element', myElementHandler);
运行结果如下。
ES6 Class 的一个好处是，可以很容易地写出继承类。
class MyNewElement extends MyElement {
// ...
}
customElements.define('my-new-element', MyNewElement);
今天的教程就到这里，更多用法请参考谷歌的官方教程。
四、参考链接
- John Negoita, Extending HTML by Creating Custom Tags
- StackOverflow, Are custom elements valid HTML5?
- Eric Bidelman, Custom Elements v1: Reusable Web Components
（正文完）
==============================
下面是一则培训消息。
自从我写了《React 技术栈系列教程》以后，有两种反馈：一种是觉得内容不够完整深入，希望有更详细的介绍，另一种是要求补上 React Native。对此我也没办法，精力有限，无法持续投入，只能推荐大家自己去看官方文档。
昨天，优达学城的朋友联系我。他们与 React Training 合作，正式推出了 React 培训课程，希望我帮忙推广。
我听了很兴奋，因为 React Training 是美国最专业的 React 培训机构，水平很高。几个讲课老师在 React 社区都非常有名，React Router 、unpkg 和 mustache.js 就是他们的作品。我相信，国内很难找到这样水平的老师和课程。
实际上，这件事在美国也很受关注，Techcrunch 进行了报道。
整个课程与美国完全同步，一共持续4个月，分成三个环节。
课程内容涉及整个 React 技术栈，PC 端和手机端并重。学完之后，可以获得纳米学位的证书。
课程价格是 3399 元人民币。注意，该课程不是零基础的，要求学习者已经掌握 JavaScript 基本语法，所以有报名审核环节。
想学 React/React Native 的同学可以考虑一下，点击这里了解详情，报名到6月27日截止。
原文链接：https://www.qiquanji.com/post/6821.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知