HTML自定义标签

因为是公司的老项目，原生写的，因为需求吧，就想说有没有可以自定义标签，搜索了之后 发现真的有，他就是 custom elements
这是文档custom-elements
跟着文档一顿操作之后发现ok，公司的测试机也都通过，没什么问题代码大概如下

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

    // 元素的功能代码写在这里
    var shadow = this.attachShadow({mode: 'open'})

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

上线之后问题出现了，发现ios11.x和ios 12.x都无法加载出来我的组件，问题是系统是支持的
后来发现了问题的原因是：我在定义的同时操作了我自定义tag的属性也就是我在constructor里面用了this.setAttribute，把这部分注释掉之后发现这两个系统可以加载出来了，但是初始化不行，赋值不正确，发现在constructor里面打印属性值是null，那就是这两个系统不能正确获取我的默认写的属性值啊
后来继续啃文档，发现了重要线索：

• connectedCallback：当 custom element首次被插入文档DOM时，被调用。
• disconnectedCallback：当 custom element从文档DOM中删除时，被调用。
• adoptedCallback：当 custom element被移动到新的文档时，被调用。
• attributeChangedCallback: 当 custom element增加、删除、修改自身属性时，被调用。

之后我把操作值都写在 connectedCallback这个生命周期回调函数
一切就ok了，大概代码如下

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);