記錄下自定義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