Google曾经起步了Chrome
54种类。最新发布的本子进一步地边缘化Flash,转而使用HTML5在浏览器里内嵌YouTube录制,同期富含了汪洋难题修复和功力修正。

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接口。

谷歌(Google卡塔尔浏览器快报,11月二十八日,GoogleChrome33迎来了第4个Stable牢固标准版,本次更新分别覆盖Windows、Mac和Linux三大桌面平台,版本号也提高至Chrome33.0.1750.117,推荐Google客户更新使用。

谷歌(Google卡塔尔国移除Flash的行事已经进展了一段时间,发表的八个立异深化了顾客和开荒者对HTML5的行使体验。

二、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 浏览器援救那几个语法。

Chrome 33更新信息:

YouTube从2014年十二月份伊始选择HTML5作为默许的录像内嵌才干,谷歌(GoogleState of Qatar在2020年校正了Chromium管理网址Flash的秘诀。

三、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的法定教程。

此更新包括28安全修补程序。包括:Windows沙盘模拟经营相对路线命政策的标题、Use-after-free相关网页内容、SVG投射错误、Use-after-free构造、XSS审计音讯走漏、TLS新闻置换的证书验证难题、拖放中的音信败露等,甚至新版本Adobe
Flash Player12.0.0.70和从内审的种种改良,模糊和其余措施。

从Chrome
45从头,浏览器在运作最重大的从头到尾的经过并暂停别的Flash内容后边会先检查测量检验网页中是或不是带有了Flash内容。

四、参谋链接

  • 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

(注:个人亲测,在Windows8Metro格局中,键盘输入不能够平常干活的主题材料早就缓慢解决。)

Chrome 54稳固版重写了YouTube内嵌Flash的方法,当检验到有内嵌的Flash
YouTube录制,浏览器会自行使用HTML5取而代之。Google代表这么些变化是“为了裁减Flash在Chrome中的使用”。

别的,Google也在官方博客公告:Chrome Frame已经退休。

Chrome 54还带给了Custom Elements标准的v1版本。

Chrome 33职能特色:

在Custom Elements
v1:可重用Web组件那篇博文里,Google程序猿EricBidelman说,通过接纳自定义成分,“Web开垦者能够创设新的HTML标签,弥补原来就有标签的欠缺,也能够对其余开采者开垦的零器件举行扩充”。其余,跟v0版本不均等的是,v1版本的API在设计上有异常的大区别。

1、自定义成分:该意义将支撑网页开采者定义新项指标HTML元素,比方用于Web应用的开拓设计功效。

关于如何根据v1标准为一个要素定义JavaScript API,Bidelman说:

依据自定义成分,开辟者可以行使如下效果:

自定义成分的效能是由此ES二〇一六类来定义的,ES2016恢弘了HTMLElement。扩张HTMLElement能够保障自定义成分会一而再整个DOM
API,也正是说,为这些类增多的其它二个属性/方法都会产生自定义成分DOM接口的一有的。本质上,正是使用这些类为你的价签成立JavaScript
API。

•定义新的HTML/DOM成分;

Bidelman举了AppDrawer这么些事例来评释什么定义DOM接口,此中类的个性被映射成HTML属性:

•成立新的因素用于扩展别的因素集合;

class AppDrawer extends HTMLElement {

  // A getter/setter for an open property.
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    // Reflect the value of the open property as an HTML attribute.
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
    this.toggleDrawer();
  }

  // A getter/setter for a disabled property.
  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    // Reflect the value of the disabled property as an HTML attribute.
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Can define constructor arguments if you wish.
  constructor() {
    // If you define a ctor, always call super() first!
    // This is specific to CE and required by the spec.
    super();

    // Setup a click listener on  itself.
    this.addEventListener('click', e => {
      // Don't toggle the drawer if it's disabled.
      if (this.disabled) {
        return;
      }
      this.toggleDrawer();
    });
  }

  toggleDrawer() {
    ...
  }
}

customElements.define('app-drawer', AppDrawer);

•可以将自定义逻辑功效合成三个十足的竹签;

有关越来越多自定义成分的音讯,包罗自定义成分的扩展和重构,请参照他事他说加以调查这里。

•扩充现成的DOM成分的API接口。

Chrome
54还包括了大气平安无事方面包车型大巴标题修复。固然谷歌(GoogleState of Qatar从不透露太多关于这个难点的细节,RichardBustamante在平安通道更新里仍旧列出了总括十几个平平安安主题材料修复,富含6个“高”安全等级难题。当中三个是U纳瓦拉L诈骗漏洞有关主题素材,有多少个是全局XSS难题(CVE-二零一四-5181),还或者有三个Blink引擎的堆溢出难点(CVE-2015-5182)。谷歌(GoogleState of Qatar的PDF软件包PDFium有四个高等别的题目修复。

简简单单的说,开采者能够使用这项功用成立Web应用进程中,使用越来越少的代码。

从谷歌(Google卡塔尔国揭橥的Chrome
54已移除和不再推荐使用的API列表来看,最新版本的Chrome分裂意跨域访谈window.onunload事件微处理机,为的是让Chrome和HTML标准保持一致。HTTP/0.9不再被推荐应用(开采者应该转向HTTP/2),initTouchEvent被移除。

3、Mac平台下扶植网络支出效率

Chrome 55安顿在今年10月通知。

4、拦截Chrome本地扩大安装

查阅罗马尼亚语原作:Chrome 54 Kills YouTube Flash
Embeds

5、后台JavaScript编写翻译机制

来自:InfoQ

Chrome 33.0.1750.117稳固版下载:

支撑Windows XP、Vista、Win7、Win8、Win8.1,简体中文版

本文出处:IT之家论坛-
《谷歌Chrome33.0.1750.117mStable内嵌框架正式离退休》