自定义元素（custom elements）

Posted 2020-09-27 BD_evel

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义元素（custom elements）相关的知识，希望对你有一定的参考价值。

记录下自定义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）的主要内容，如果未能解决你的问题，请参考以下文章

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

Knockoutjs：Component and Custom Elements

5.5 Components -- Customizing A Compnent's Element

如何将 JSON 对象传递给角度自定义元素

在JavaFX中添加自定义组件

vue中使用Element主题自定义肤色