写在问题前面：Vue和React中同一个自定义标签，传入的属性会有不同的结果。为了后面的描述方便，先自定义一个标签，代码如下：}构造函数（）{超级（）;}getdesc(){console.log('get');返回this.getAttribute('desc');}setdesc(value){console.log('set',typeofvalue);this.setAttribute('desc',value);}attributeChangedCallback(name,oldValue,newValue){console.log('attributeChangedCallback!',name,1);}connectedCallback(){console.log('connectedCallback!',typeofthis.desc);constshadowRoot=this.attachShadow({mode:'open'});shadowRoot.innerHTML=`${this.desc}`;}}customElements.define('my-cell',MyCell);然后在Vue和React中使用Cell，看看会如何打印？如图，可以看到在Vue项目中，会有一个集合，而在React项目中没有。另外，验证过Vue传递的是DOM属性：//属性传递的是DOM属性！Cell//string//传递的属性是DOM属性！Cell//布尔值总结：vue中的属性作为DOM属性传入，会触发setreact中的属性作为DOM属性传入，并且不会触发set如何解决在Vue和React中表现一致？DOMproperty和DOMattribute的不同导致自定义标签在Vue和React中使用时表现不同。核心思想是打好映射关系。在WCs内部执行：connectedCallback(){+this.desc=this.desc;//attribute->propertymapping}等号左边的this.desc执行赋值动作，会触发set的执行：setdesc(value){this.setAttribute('desc',value);//settoattribute}右等号this.desc是一个get动作，会调用get:getdesc(){returnthis.getAttribute('desc');//getattribute}final，我们将出入属性统一转化为DomAttribute。总结：无论传入什么属性，使用this.xx=this.xx将外部传入的属性统一设置为DOM属性。关于WebComponents写在最后，欢迎留言讨论~
