记录下自定义html自定义元素的相关心得：

浏览器将自定义元素保留在 DOM 之中，但不会任何语义。除此之外，自定义元素与标准元素都一致

事实上，浏览器提供了一个HTMLUnknownElement，HTMLElement对象，所有自定义元素都是该对象的实例。

   var tabs=document.createElement("tabs");

   console.log(tabs instanceof HTMLUnknownElement);//true

   console.log(tabs instanceof HTMLElement);//true

Custom Elements 标准:“自定义元素的名字必须包含一个破折号（-）
一旦名字之中使用了破折号，自定义元素就不是HTMLUnknownElement的实例了。

 var tabs=document.createElement("my-tabs");

   console.log(tabs instanceof HTMLUnknownElement);//false

   console.log(tabs instanceof HTMLElement);//true

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

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

      <my-element content="Custom Element">

  Hello

</my-element>

 </body>

</html>

<script>

class MyElement extends HTMLElement {//自定义元素的定义可以使用ES6的class语法

  get  content() {

    return this.getAttribute('content');

  }

  set  content(val) {

    this.setAttribute('content', val);

  }

}

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

window.customElements.define('my-element', MyElement);

window.onload=function(){//在页面元素加载完之后，才执行

function customTag(tagName, fn){//Array.from（[arguments]）；可以将字符串，数组，类数组集合转化为数组

  Array

    .from(document.getElementsByTagName(tagName))

    .forEach(fn);

}

function myElementHandler(element) {

  element.textContent = element.content;

}

customTag('my-element', myElementHandler);

};

</script>

另外一个比较简单的例子：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

    greeting{

        display:block;

         font-size:36px;

        color:red;

    }

  </style>

  <script>

  window.onload = function() {

            function customTag(tagName, fn){

            console.log(document.getElementsByTagName("div"));

            Array .from(document.getElementsByTagName(tagName)).forEach(fn);

             }

            function greetingHandler(element) {

              element.innerHTML = '你好，世界';

            }

            customTag('greeting', greetingHandler);

    }

</script>

 </head>

 <body>

 <div></div>

        <greeting>Hello World</greeting>

        <greeting>Hello World</greeting>

        <greeting>Hello World</greeting>

 </body>

</html>

其实更关心的是，HTML组件的开发，这是一个很好的雏儿。

https://developer.mozilla.org/en-US/docs/Web/JavaScript

自定义元素（custom elements）的更多相关文章

  1. window 属性：自定义元素（custom elements）

      概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...

  2. 使用 custom element 创建自定义元素

    很早我们就可以在 HTML 文档中写 <custome-element></custom-element> 这样的自定义名称标签.但是浏览器对于不认识的标签一律当成一个普通的行 ...

  3. 使用custom elements和Shadow DOM自定义标签

    具体的api我就不写 官网上面多  如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...

  4. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  5. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  6. 自定义元素 – 在 HTML 中定义新元素

    本文翻译自 Custom Elements: defining new elements in HTML,在保证技术要点表达准确的前提下,行文风格有少量改编和瞎搞. 原译文地址 本文目录 引言 用时髦 ...

  7. HTML 自定义元素教程

    组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望. 本文就介绍 HTML 组件的基础知识:自定义元素(custom elements). 文章 ...

  8. HTML Custom Elements & valid name

    HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...

  9. 自定义元素–为你的HTML代码定义新元素

    注意:这篇文章介绍的 API 尚未完全标准化,并且仍在变动中,在项目中使用这些实验性 API 时请务必谨慎. 引言 现在的 web 严重缺乏表达能力.你只要瞧一眼“现代”的 web 应用,比如 GMa ...

随机推荐

  1. js判断回车，判断焦点控件

    document.onkeydown=function(event){        e = event ? event :(window.event ? window.event : null);  ...

  2. Web字体（链接）嵌入

    下面是我最近在学习的两种字体嵌入方法 1.@font-face 使用@font-face可以这样做: @font-face{ font-family:"Garamod Premier Pro ...

  3. 最大匹配算法 (Maximum Matching)

    之所以研究这个算法,是因为最近在研究NLP中文的分词,所谓分词就是将一个完整的句子,例如“计算语言学课程有意思”,分解成一些词组单元“计算语言学,课程,有,意思”. “最大匹配法” 在中文分词中有所应 ...

  4. 备注下Windows可能会用到的运行命令

    因为有几个命令不常用忘记了,所以备注下Windows可能会用到的运行命令: 1.cleanmgr:打开磁盘清理工具2.compmgmt.msc:计算机管理3.charmap:启动字符映射表4.calc ...

  5. 联想THINKPAD E40的快捷键怎么关闭？哪些F1 F2 F3的键我需要用到 但是每次都按FN 太烦人了

    1.开机时,按F1进入BIOS,依次选择CONFIG--Keyboard/Mouse,2.在Change to "f1-f12 keys"选项中,更改设置为Legacy或者Defa ...

  6. 转：java c/s tomcat 三层架构

    概述在c/s结构的发展历程中,产生了两层c/s结构和三层c/s结构之分.在两层c/s结构中,在信息管理系统的管理上主要分为客户端和数据库服务器. 缺点有两个: 1)开销高昂.在两层c/s结构中,为了维 ...

  7. Git 之 问题集锦

    准备:远程仓库名:origin     远程分支:master.tt      本地分支:master.test 1. error: src refspec *** does not match an ...

  8. three.js入门系列之材质

    一.基础网孔材料 MeshBasicMaterial 图示(光源是(0,1,0)处的点光源): 二.深度网孔材料 MeshDepthMaterial (由于只是改了材料名,代码将不重复贴出) 在这里, ...

  9. ES6-块级作用域绑定-let和const

    一.var声明及变量提升机制 var声明,无论实际上在哪里声明,都会被当做在当前作用域顶部声明的变量,这就是变量提升机制. 二.块级声明 块级声明用于声明在指定块的作用域之外无法访问的变量.块级作用域 ...

  10. wireshark的一些快捷键

    恢复原来的大小   ‘crtl’+‘=’  即按住crtl建和=键(backspace左边那个键) 缩小 ‘crtl’+‘-’ 即按住crtl建和-键(backspace左边第二个键) 放大 ‘crt ...