Javascript 如何在web组件中创建Accordion自定义元素

我正在尝试使用javascript中的自定义元素创建一个手风琴

下面提到的HTML是我在HTML中编写的

var accordions=document.queryselectoral（“.accordion”）；
对于（变量i=0；i

手风琴1
内容1

如果您可以使用现代的自定义元素，您的浏览器也会知道

和

详情[公开]{
背景：浅绿色；
左：1米；
}
详细信息[打开]摘要{
背景：绿色；
颜色：白色；
左边距：-1米；
}
太棒了！
BravoNote默认的open属性
胡说八道！按住Ctrl键
德尔塔…
结束
define（'my-accordion'，类扩展HtmleElement{
connectedCallback（）{
this.onclick=evt=>{
[…this.children].map（详细信息=>{
！evt.ctrlKey&&detail.toggleAttribute（“打开”，evt.target==detail）；
});
}
}
});

忘记自定义元素部分，首先用常规HTML、CSS和JS代码编写代码。一旦有了它，就可以将它压入一个可重用的自定义元素中。把它想象成一个工厂。。如果你没有模具，你就不能用塑料制造东西。键入

javascript手风琴

，如果您不知道如何编写手风琴，请阅读所有14.800.000个答案。我编写了javascript手风琴。如何创建自定义元素？很酷，现在应用以下知识：