记录下自定义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
时间： 2024-10-20 20:57:36