HTML custom tag

Time:2021-6-8

Because it’s an old project of the company, it’s originally written. Because of the demand, I just want to say whether there is a user-defined tag. After searching, I found that there is one. It’s just a user-defined tagcustom elements
This is the document custom elements
After a bit of operation with the document, I found that OK, the company’s test machine also passed, no problem, the code is as follows

class PopUpInfo extends HTMLElement {
  constructor() {
    //The super method must be called first 
    super(); 

    //The function code of the element is written here
    var shadow = this.attachShadow({mode: 'open'})

    ...
  }
}
customElements.define('popup-info', PopUpInfo);

After going online, the problem appeared. I found that neither ios11. X nor IOS 12. X could load my components. The problem is that the system supports them
Later, I found that the reason for the problem is: I used this.setattribute in the constructor when I defined it. After commenting out this part, I found that the two systems could be loaded, but the initialization was not good, the assignment was incorrect, and I found that the value of the printed attribute in the constructor was null, That is, these two systems can’t get my default attribute values correctly
Later, he continued to gnaw at documents and found important clues

  • connectedCallback: called when the custom element is first inserted into the document dom.
  • disconnectedCallback: called when the custom element is removed from the document dom.
  • adoptedCallback: called when the custom element is moved to a new document.
  • attributeChangedCallback: called when custom element adds, deletes, or modifies its own properties.

After that, I write all the operation values in theconnectedCallbackThis lifecycle callback function
Everything is OK. The code is as follows

class inputNumber extends HTMLElement{
  constructor(){
    super();
    var shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot. = `
    <style>
      .ayb-num-box{
         
      }
      .ayb-num-box .addButton,.ayb-num-box .subButton{
          
      }
      .ayb-num-box .subButton{
          
      }
      .ayb-num-box .addButton{
         
      }
      .ayb-num-box .subButton.disabled{
         
      }
      .ayb-num-box .ayb-input-num{
         
      }
      </style>
      <div class="ayb-num-box">
        <div class="subButton">-</div>
        <input class="ayb-input-num" type="text" value="">
        <div class="addButton">+</div>
      </div>
    `
    this._subButton = shadowRoot.querySelector('.subButton');
    this._addButton = shadowRoot.querySelector('.addButton');
    this._aybInputNum = shadowRoot.querySelector('.ayb-input-num');
  }
  connectedCallback () {
    var type,min,multiple,precision,step,defaultValue,val;
    type = this.hasAttribute('type') ? this.getAttribute('type') : 'natural';
    var _this = this;
    _this.setAttribute('value', defaultValue)
    _this._aybInputNum.setAttribute('value',defaultValue);
    _this._subButton.addEventListener('touchend',function () {
     ...
    })
    _this._addButton.addEventListener('touchend',function () {
     ...
    })
    _this._aybInputNum.addEventListener('input',function (e) {
     ...
    })
    _this._aybInputNum.addEventListener('blur',function () {
     ...
    })
  }
}
customElements.define('ayb-input-number', inputNumber);

Recommended Today

Hot! Front and rear learning routes of GitHub target 144K

Hello, Sifu’s little friend. I’m silent Wang Er. Last week, while appreciating teacher Ruan Yifeng’s science and technology weekly, I found a powerful learning route, which has been marked with 144K on GitHub. It’s very popular. It covers not only the front-end and back-end learning routes, but also the operation and maintenance learning routes. As […]