vanilla JavaScript中的异步web组件

我有一个边栏组件，当用户通过身份验证时，它应该更改其内容。问题是在获取身份验证之前运行脚本。我尝试的方法是创建一个observedAttributes（）方法，该方法在创建属性化身份验证时侦听，但不起作用

class sidebarComponent extends HTMLElement {
   constructor() {
       super();
       this.attachShadow({mode: 'open'});
       
   }

   static get observedAttributes() {
       return ['authenticated']
   }

   attributeChangedCallback(attr, oldVal, newVal) {
       if(attr === 'authenticated') {
           this.authenticated = newVal;
       }
   }

   getTemplate() {
       const template = document.createElement('template');
       console.log(this.authenticated)
       if(this.authenticated == 'true') {
           template.innerHTML = `
           <div class="component">
               <ul class="list">
                   <li>
                       <a href="#">Mi Cuenta</a>
                   </li>
                   <li>
                       <a href="#">Desconectarse</a>
                   </li>
               </ul>
           </div>
           ${this.getStyle()}
           `
       } else {
           template.innerHTML = `
           <div class="component">
               <ul class="list">
                   <li>
                       <a href="#">Registrarse</a>
                   </li>
                   <li>
                       <a href="#">Iniciar Sesion</a>
                   </li>
               </ul>
           </div>
           ${this.getStyle()}
           `
       }
       
       return template;
   }
   
   getStyle() {
       return `
           <style>
               /*styles*/
           </style>
       `
   }

   render() {
       this.shadowRoot.appendChild(this.getTemplate().content.cloneNode(true))
   }

   connectedCallback() {
       this.render()
   }
}

customElements.define('sidebar-component', sidebarComponent)

class sidebarComponent扩展了HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
}
静态get ObservedAttribute（）{
返回['authenticated']
}
属性更改回调（属性、旧值、新值）{
如果（attr==='authenticated'）{
this.authenticated=newVal；
}
}
getTemplate（）{
const template=document.createElement（'template'）；
console.log（this.authenticated）
如果（this.authenticated==“true”）{
template.innerHTML=`






${this.getStyle（）}
`
}否则{
template.innerHTML=`






${this.getStyle（）}
`
}
返回模板；
}
getStyle（）{
返回`
/*风格*/
`
}
render（）{
this.shadowRoot.appendChild（this.getTemplate（）.content.cloneNode（true））
}
connectedCallback（）{
this.render（）
}
}
自定义元素。定义（'sidebar-component'，sidebarComponent）

---

我还尝试了async/await，但没有找到正确的方法。首先，

authenticated

属性未链接到任何全局属性或事件。因此，如果站点/应用程序的身份验证状态发生任何更改，必须主动通知组件

详细说明：该组件仅处理html属性的更改，如

属性没有getter/setter，因此

document.querySelector（'sidebar-component'）。authenticated=“true”

不行

---

其次，组件仅在

connectedCallback

中呈现一次。对

authenticated

属性的任何更改都会触发重新呈现-因此可能会将

this.render（）

添加到

attributeChangedCallback

函数中，并确保不会追加新内容，而是替换旧内容。

Hello！谢谢你的回复。我现在得到它的方法是添加一个cookie，显示用户是否被授权（auth=true）。组件可以在没有属性的情况下读取它。这可能不是最佳做法，但有助于我对组件进行中间充电（组件不显示敏感信息）。我没有想到在getter/setter中可以解决这个问题，我会尝试应用它。再次感谢！