HTML 自定义元素教程

by admin on 2020年4月22日

谷歌已经启动了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接口。

谷歌浏览器快报,2月20日,谷歌Chrome33迎来了首个Stable稳定正式版,本次更新分别覆盖Windows、Mac和Linux三大桌面平台,版本号也升级至Chrome33.0.1750.117,推荐谷歌用户更新使用。

谷歌移除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从2015年1月份开始使用HTML5作为默认的视频内嵌技术,谷歌在去年改变了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);

今天的教程就到这里,更多用法请参考谷歌的官方教程。

此更新包括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替代它。谷歌表示这个变化是“为了减少Flash在Chrome中的使用”。

另外,谷歌也在官方博客公告:Chrome Frame已经退休。

Chrome 54还带来了Custom Elements规范的v1版本。

Chrome 33功能特性:

在Custom Elements
v1:可重用Web组件这篇博文里,谷歌工程师Eric
Bidelman说,通过使用自定义元素,“Web开发者可以创建新的HTML标签,弥补已有标签的不足,也可以对其他开发者开发的组件进行扩展”。另外,跟v0版本不一样的是,v1版本的API在设计上有很大不同。

1、自定义元素:该功能将支持网页开发者定义新类型的HTML元素,例如用于Web应用的开发设计功能。

关于如何遵循v1规范为一个元素定义JavaScript API,Bidelman说:

借助自定义元素,开发者可以使用如下功能:

自定义元素的功能是通过ES2015类来定义的,ES2015扩展了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还包括了大量安全方面的问题修复。尽管谷歌没有透露太多关于这些问题的细节,Richard
Bustamante在稳定通道更新里还是列出了总共21个安全问题修复,包括6个“高”安全级别问题。其中一个是URL欺骗漏洞相关问题,有一个是全局XSS问题(CVE-2016-5181),还有一个Blink引擎的堆溢出问题(CVE-2016-5182)。谷歌的PDF软件包PDFium有三个高级别的问题修复。

简单的说,开发者可以使用这项功能创建Web应用过程中,使用更少的代码。

从谷歌公布的Chrome
54已移除和不再推荐使用的API列表来看,最新版本的Chrome不允许跨域访问window.onunload事件处理器,为的是让Chrome和HTML规范保持一致。HTTP/0.9不再被推荐使用(开发者应该转向HTTP/2),initTouchEvent被移除。

3、Mac平台下支持网络支付功能

Chrome 55计划在今年11月发布。

4、拦截Chrome本地扩展安装

查看英文原文:Chrome 54 Kills YouTube Flash
Embeds

5、后台JavaScript编译机制

来自:InfoQ

Chrome 33.0.1750.117稳定版下载:

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

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

发表评论

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

网站地图xml地图