HTML自定义标签_0

时间：2023-04-02 15:33:35 HTML

是公司老项目，原生写的，因为需求，想问问有没有自定义标签，搜索了一下发现是自定义元素。这个是文档custom-elements跟着文档看了一会，发现还可以，公司的测试机也通过了。没有问题。代码大致如下classPopUpInfoextendsHTMLElement{constructor(){//必须先调用super方法super();这里varshadow=this.attachShadow({mode:'open'})...}}customElements.define('popup-info',PopUpInfo);上线后出现问题，发现ios11.x和ios12.x都加载不了我的组件。问题是系统支持它。后来发现问题的原因是：我在定义自定义标签的时候操作了它的属性，也就是我在构造函数中使用了this.setAttribute，把这部分注释掉了，我发现这两个系统可以加载，但初始化不工作，分配不正确。我发现构造函数中打印的属性值是null，也就是这两个系统无法正确获取到我默认写的属性值。在文档中，发现了重要的线索：connectedCallback：当自定义元素第一次插入到文档DOM中时，被调用。disconnectedCallback：当自定义元素从文档DOM中移除时调用。adoptedCallback：当自定义元素移动到新文档时调用。attributeChangedCallback：自定义元素添加、删除或修改自身属性时调用。之后我把所有的操作值都写在connectedCallback的生命周期回调函数里面就一切ok了。大致代码如下classinputNumberextendsHTMLElement{constructor(){super();varshadowRoot=this.attachShadow({mode:'open'});阴影根。=`-

`这个._subButton=shadowRoot.querySelector('.subButton');this._addButton=shadowRoot.querySelector('.addButton');this._aybInputNum=shadowRoot.querySelector('.ayb-input-num');}连接器dCallback(){vartype,min,multiple,precision,step,defaultValue,val;类型=this.hasAttribute('类型')?this.getAttribute('type'):'自然';var_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);