Javascript Web组件：内部动态内容<；模板>；

我使用以下代码创建Web组件的实例：

<main></main>
<template id="my-template">
  <style>
    p { color: green; }
  </style>
  <p>I'm in Shadow DOM.</p>
</template>


<script>
  let tmpl = document.querySelector('#my-template');
  class AppDrawer extends HTMLElement {

    constructor() {
      super(); 
      this.root = this.attachShadow({mode: 'open'});
      //this.root.appendChild(tmpl.content.cloneNode(true));
    }

    set details(user) {
      this.root.innerHTML = `<h2> ${user.company.name}</h2>`
    }
  }
  window.customElements.define('app-drawer', AppDrawer);


  async function asyncCall() {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const json = await res.json();

    const main = document.querySelector("main");
    json.forEach(user=> {
      const el = document.createElement("app-drawer");
      el.details = user;
      main.appendChild(el);
    });
  }

  asyncCall();

</script>

p{颜色：绿色；}
我在阴影中

让tmpl=document.querySelector（“#我的模板”）；
类AppDrawer扩展HtmleElement{
构造函数（）{
超级（）；
this.root=this.attachShadow（{mode:'open'}）；
//this.root.appendChild（tmpl.content.cloneNode（true））；
}
设置详细信息（用户）{
this.root.innerHTML=`${user.company.name}`
}
}
window.customElements.define（'app-drawer'，AppDrawer'）；
异步函数asyncCall（）{
const res=等待获取（“https://jsonplaceholder.typicode.com/users");
const json=await res.json（）；
const main=document.querySelector（“main”）；
forEach（用户=>{
const el=document.createElement（“应用程序抽屉”）；
el.details=用户；
主、辅项（el）；
});
}
异步调用（）；

通过运行上述命令，我得到了一些名称作为输出。到现在为止，一直都还不错。现在，尝试使用

替换，删除构造函数中的注释并删除

el.details=user同样，我在影子DOM中得到了多个
文件。
我的问题是如何通过使用第二种方法实现第一种情况下的动态内容（不同用户名）？
您只需要用一条语句替换
el.details=user
，将适当的HTML添加到影子DOM中。（这使得二传不相关，因此我已将其注释掉。）


编辑：

根据评论中的要求，我已经更新了代码片段，将
user.company.name
作为构建过程中的属性传递到web组件中，而不是事后强制设置值

（请注意，我从模板中删除了
元素，而只是将
元素包含在将显示
userCompanyName
的位置。）


let tmpl=document.querySelector（“#我的模板”）；
类AppDrawer扩展HtmleElement{
构造函数（）{
超级（）；
this.root=this.attachShadow（{mode:'open'}）；
//创建``元素内容的副本
const copy=tmpl.content.cloneNode（true）；
//选择副本中包含的目标元素
const header=copy.querySelector（“H2”）；
//将组件实例的“usernamecomp”属性复制到其“userCompName”属性
this.userCompName=this.getAttribute（“userCompName”）；
//将目标元素的内容设置为等于“userCompName”属性
header.innerHTML=this.userCompName；
//将增强副本追加到阴影域
this.root.appendChild（副本）；
}
}
window.customElements.define（'app-drawer'，AppDrawer'）；
异步函数asyncCall（）{
const res=等待获取（“https://jsonplaceholder.typicode.com/users");
const json=await res.json（）；
const main=document.querySelector（“main”）；
forEach（用户=>{
//标识作为属性传递到组件实例的字符串
const userCompName=user.company.name；
//编写HTML以用于实例化具有“usercompname”属性的“``元素
常量抽屉实例=``；
//创建附加到``元素的新``元素
main.insertAdjacentHTML（“beforeed”，drawerInstance）；
});
}
异步调用（）

h2{颜色：绿色；}
我在阴影中。
您可以将加载的值作为参数传递给使用
新建
创建的自定义元素：

json.forEach( user => main.appendChild( new AppDrawer( user ) ) )

您只需要使用一个参数定义自定义元素
constructor（）
：

constructor( user ) {
    ...
}

请参见下面的完整示例：


类AppDrawer扩展HtmleElement{
构造函数（用户）{
超级（）
this.attachShadow（{mode:'open'}）
.innerHTML=`p{color:green}
${user.company.name}
`
}
}
window.customElements.define（'app drawer'，AppDrawer）
异步函数asyncCall（）{
const res=等待获取（“https://jsonplaceholder.typicode.com/users" )
const json=await res.json（）
const main=document.querySelector（“main”）
json.forEach（用户=>main.appendChild（新的AppDrawer（用户）））
}
asyncCall（）
最好保留setter并从其内部更改shadowRoot（或将用户值作为构造函数参数传递）。您可以将其作为属性传递，如
，然后访问构造函数中相应的userinfo属性。如果你需要我写一个例子，我很乐意，但可能要等到明天。@Cat，我想看看如何在构造函数中传递用户的例子嘿，我会回来找你的。给我点时间。谢谢。我的第一反应（只看一次你的问题）是：吃角子老虎-