javascript - 如何在 ShadowDOM 中通过 id 查找元素？

Question

如何获取对 Angular 组件中封装设置为 ShadowDOM 的元素的引用？

const element = document.getElementById(id); 

例如返回null

编辑:添加了 html 片段

<div *ngFor='let item of items' [attr.id]='item.key'>
.....
</div>

我需要引用创建的每个 div。

使用模板变量可以，但据我所知，您无法动态生成模板变量。

例如

<div #myTarget> ... </div>

作品

Answer 1

您的代码与 ShadowDOM 完全无关，并且您不应该在 Angular 中通过 ID 选择元素，因为这是一种反模式。相反，使用 the ViewChildren() selector在你的 TypeScript 代码中!

class SomeCmp implements AfterViewInit {
  @ViewChildren('myItem') items!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    console.log(`I have ${this.items.length} items!`);
  }
}

<div *ngFor='let item of items' #myItem>
.....
</div>