自定义元素（custom elements）

发布于 2022-10-26 21:40:58 字数 4859 浏览 148 评论 0

记录下自定义 html 自定义元素的相关心得：vue-web-component-wrapper

浏览器将自定义元素保留在 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 组件的开发，这是一个很好的雏儿。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
      my-zhangsan {
        display: block;
        color: white;
        border: 1px solid red;
        background: green;
        text-align: center;
        padding: 10px 0px;
      }
    </style>
  </head>

  <body>
    <my-zhangsan content="Custom Element 哈哈">
      Hello
    </my-zhangsan>
  </body>

</html>
<script>
  class MyZhangsan 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-zhangsan', MyZhangsan);

  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-zhangsan', myElementHandler);
  };
  
  document.getElementsByTagName("my-zhangsan")[0].addEventListener("click",function(){
    ("我是自定义元素！")
  })
</script>

分享到QQ

分享到微博