www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

原文出处

2019-09-16 14:33 来源:未知

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);

今天的课程就到此地,更加多用法请参谋谷歌(Google)的合法教程。

四、参照他事他说加以考察链接

  • 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

TAG标签: www.22138com HTML5
版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:原文出处