原文出处。

HTML 自定义元素教程

2017/06/22 · HTML5 ·
自定义元素

原文出处:
阮一峰   

组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML
组件未来可能更有希望。

本文就介绍 HTML 组件的基础知识:自定义元素(custom elements)。

威尼斯赌场手机版本 1

一、浏览器处理

我们一般都使用标准的 HTML 元素。

XHTML

<p>Hello World</p>

1
<p>Hello World</p>

上面代码中,“

“就是标准的 HTML 元素。

如果使用非标准的自定义元素,会有什么结果?

XHTML

<greeting>Hello World</greeting>

1
<greeting>Hello World</greeting>

上面代码中,`就是非标准元素,浏览器不认识它。这段代码的[运行结果](http://jsbin.com/rifozonomu/edit?html,output)是,浏览器照常显示Hello World`,这说明浏览器并没有过滤这个元素。

威尼斯赌场手机版本 2

现在,为自定义元素加上样式。

JavaScript

greeting { display: block; font-size: 36px; color: red; }

1
2
3
4
5
greeting {
  display: block;
  font-size: 36px;
  color: red;
}

运行结果如下。

威尼斯赌场手机版本 3

接着,使用脚本操作这个元素。

JavaScript

function customTag(tagName, fn){ Array
.from(document.getElementsByTagName(tagName)) .forEach(fn); } function
greetingHandler(element) { element.innerHTML = ‘你好,世界’; }
customTag(‘greeting’, greetingHandler);

1
2
3
4
5
6
7
8
9
10
11
function customTag(tagName, fn){
  Array
    .from(document.getElementsByTagName(tagName))
    .forEach(fn);
}
 
function greetingHandler(element) {
  element.innerHTML = ‘你好,世界’;
}  
 
customTag(‘greeting’, greetingHandler);

运行结果如下。

威尼斯赌场手机版本 4

这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入
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对象,所有自定义元素都是该对象的实例。

JavaScript

var tabs = document.createElement(‘tabs’); tabs instanceof
HTMLUnknownElement // true tabs instanceof HTMLElement // true

1
2
3
4
var tabs = document.createElement(‘tabs’);
 
tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true

上面代码中,tabs是一个自定义元素,同时继承了HTMLUnknownElementHTMLElement接口。

二、HTML import

有了自定义元素,就可以写出语义性非常好的 HTML 代码。

XHTML

<share-buttons> <social-button type=”weibo”> <a
href=”…”>微博</a> </social-button> <social-button
type=”weixin”> <a href=”…”>微信</a>
</social-button> </share-buttons>

1
2
3
4
5
6
7
8
<share-buttons>
  <social-button type="weibo">
    <a href="…">微博</a>
  </social-button>
  <social-button type="weixin">
    <a href="…">微信</a>
  </social-button>
</share-buttons>

上面的代码,一眼就能看出语义。

如果将`元素的样式与脚本,封装在一个 HTML
文件
share-buttons.html`之中,这个元素就可以复用了。

使用的时候,先引入share-buttons.html

<link rel=”import” href=”share-buttons.html”>

1
<link rel="import" href="share-buttons.html">

然后,就可以在网页中使用“了。

XHTML

<article> <h1>Title</h1> <share-buttons/> …
… </article>

1
2
3
4
5
<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
浏览器支持。

威尼斯赌场手机版本 5

Custom Elements
标准对自定义元素的名字做了限制。

“自定义元素的名字必须包含一个破折号(-)所以都是正确的名字,而和“是不正确的。这样的限制使得
HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。”

威尼斯赌场手机版本 6

注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。

JavaScript

var xTabs = document.createElement(‘x-tabs’); xTabs instanceof
HTMLUnknownElement // false xTabs instanceof HTMLElement // true

1
2
3
4
var xTabs = document.createElement(‘x-tabs’);
 
xTabs instanceof HTMLUnknownElement // false
xTabs instanceof HTMLElement // true

Custom Elements 标准规定了,自定义元素的定义可以使用 ES6
class语法。

JavaScript

// 定义一个 class MyElement extends HTMLElement {…}
window.customElements.define(‘my-element’, MyElement);

1
2
3
// 定义一个
class MyElement extends HTMLElement {…}
window.customElements.define(‘my-element’, MyElement);

上面代码中,原生的window.customElements对象的define方法用来定义
Custom
Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个
ES6 的class

这个class使用getset方法定义 Custom Element 的某个属性。

JavaScript

class MyElement extends HTMLElement { get content() { return
this.getAttribute(‘content’); } set content(val) {
this.setAttribute(‘content’, val); } }

1
2
3
4
5
6
7
8
9
class MyElement extends HTMLElement {
  get content() {
    return this.getAttribute(‘content’);
  }
 
  set content(val) {
    this.setAttribute(‘content’, val);
  }
}

有了这个定义,网页之中就可以插入“了。

JavaScript

<my-element content=”Custom Element”> Hello </my-element>

1
2
3
<my-element content="Custom Element">
  Hello
</my-element>

处理脚本如下。

JavaScript

function customTag(tagName, fn){ Array
.from(document.getElementsByTagName(tagName)) .forEach(fn); } function
myElementHandler(element) { element.textConent = element.content; }
customTag(‘my-element’, myElementHandler);

1
2
3
4
5
6
7
8
9
10
11
function customTag(tagName, fn){
  Array
    .from(document.getElementsByTagName(tagName))
    .forEach(fn);
}
 
function myElementHandler(element) {
  element.textConent = element.content;
}
 
customTag(‘my-element’, myElementHandler);

运行结果如下。

威尼斯赌场手机版本 7

ES6 Class 的一个好处是,可以很容易地写出继承类。

JavaScript

class MyNewElement extends MyElement { // … }
customElements.define(‘my-new-element’, MyNewElement);

1
2
3
4
5
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

 

1 赞 1 收藏
评论

威尼斯赌场手机版本 8

发表评论

电子邮件地址不会被公开。 必填项已用*标注