Html 自定义标签

前言

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

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>