HTML 自定义元素教程

文章预览

组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。  本文就介绍 HTML 组件的基础知识：自定义元素（custom elements）。 一、浏览器处理   我们一般都使用标准的 HTML 元素。 Hello World 上面代码中， 就是标准的 HTML 元素。  如果使用非标准的自定义元素，会有什么结果？ Hello World 上面代码中， 就是非标准元素，浏览器不认识它。这段代码的运行结果是，浏览器照常显示 Hello World ，这说明浏览器并没有过滤这个元素。 现在，为自定义元素加上样式。 greeting {  display : block ;  font - size : 36px ;  color : red ; } 运行结果如下。 接着，使用脚本操作这个元素。 function customTag ( tagName , fn ){   Array     . from ( document . getElementsByTagName ………………………………