Html 自定义标签

Html 自定义标签

前言

本文主要介绍如何自定义标签，以及自定义标签中的一些属性。方便理解electron+vue 的程序设计。
Html 自定义标签有二种方法，一种是从原有标签中继承，另一种非继承。二种方法很类似，主要差别如下：
差别1：

customElements.define('user-line', Line，, { extends: "ul" }); //{ extends: "ul" }为继承与非继承的差别

差别2：继承的js类不同
如上，如果继承ul，则要extends HTMLUListElement

class ExpandingList extends HTMLUListElement {
  constructor() {
    // 必须首先调用 super 方法
    super();

    // 元素的功能代码写在这里

    ...
  }
}

如果是非继承，则extern HTMLElement.

这里主要介绍非继承的方式。

非继承的实现方法

js 代码如下

//方法1 不继承自原有的html
class Line extends HTMLElement{
    constructor(){
        //类的构造函数constructor总是先调用super()来建立正确的原型链继承关系。
        super();

        //Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样
        //open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM
        const shadow = this.attachShadow({mode: 'open'});

        const divparent = document.createElement('div');
        divparent.setAttribute('class','div_parent');

        const doc_lable_sign_div = document.createElement('div');
        doc_lable_sign_div.setAttribute('class','lable_sign');
        doc_lable_sign_div.textContent="医生签名:";

        this.doc_name_sign_div = document.createElement('div');
        this.doc_name_sign_div.setAttribute('class','doc_name_sign_div');

        const patient_lable_sign_div = document.createElement('div');
        patient_lable_sign_div.setAttribute('class','lable_sign');
        patient_lable_sign_div.textContent="患者签名:";

        this.patient_name_sign_div = document.createElement('div');
        this.patient_name_sign_div.setAttribute('class','patient_name_sign_div');

        const style = document.createElement('style');
        console.log(style.isConnected);

        const span1 = document.createElement('span');
        span1.setAttribute('class','span');
        const span2 = document.createElement('span');
        span2.setAttribute('class','span');

        const attr_doc = document.createAttribute("docname");
        const attr_patient = document.createAttribute("patientname");


        style.textContent = `
        .div_parent{
            display:flex;
            justify-content:flex-end;
        }
        .lable_sign{
            font-style:italic;
            font-weight:bold;
            font-size:16px;
        }
        .doc_name_sign_div{
            font-weight:normal;
        }
        .patient_name_sign_div{
            font-weight:normal;
        }
        .span{
            min-width:50px;
        }
        `

        shadow.appendChild(style);
        console.log(style.isConnected);
        shadow.appendChild(divparent);

        divparent.appendChild(doc_lable_sign_div);
        divparent.appendChild(this.doc_name_sign_div);
        divparent.appendChild(span1);
        divparent.appendChild(patient_lable_sign_div);
        divparent.appendChild(this.patient_name_sign_div);
        divparent.appendChild(span2);

    }

    //指定观察属性，属性发生变化时调用  attributeChangedCallback
    static get observedAttributes() {
        return ['docname', 'patientname'];
    }

    //当元素插入到 DOM 中时，connectedCallback()函数将会执行
    connectedCallback(){
        console.log("..connectedCallback");
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log(`element attributes changed. oldvalue:${oldValue} newValue:${newValue}`);
        switch(name){
            case 'docname':
                this.doc_name_sign_div.textContent=newValue;
            break;
            case 'patientname':
                this.patient_name_sign_div.textContent=newValue;
            break;
        }
      }
}

customElements.define('user-line', Line);

代码说明：这里创建了二个属性

docname ，patientname

其中有对二个属性进行操作，留意这里

//指定观察属性，属性发生变化时调用  attributeChangedCallback
static get observedAttributes() {
    return ['docname', 'patientname'];
}

attributeChangedCallback(name, oldValue, newValue) {
    console.log(`element attributes changed. oldvalue:${oldValue} newValue:${newValue}`);
    switch(name){
        case 'docname':
            this.doc_name_sign_div.textContent=newValue;
        break;
        case 'patientname':
            this.patient_name_sign_div.textContent=newValue;
        break;
    }
  }

与下面html中的属性（docname，patientname）有关

<body>
    <user-line docname="Doc" patientname="xxxx"></user-line>
</body>

完整的Html代码如下，要注意的地方有注释（defer）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 必须在script标签上添加defer属性 -->
    <script src="./custom_elements1.js" defer></script>
</head>
<body>
    <user-line docname="Doc" patientname="xxxx"></user-line>
</body>
</html>

显示效果

在浏览器生成的元素