模板组件 - 使用 querySelector() 到阴影 dom 内的 select 元素

Question

我正在创建一个包装我一直在使用的 canvas 库的组件，以使其在我的一些应用程序和范围之间可移植 functionality/style 以在应用程序之间保持一致.

问题是，部分库要求我将 canvas 元素作为 class 的参数传递。

是否可以 select 模板内部的元素 class？到目前为止，我设法完成它的唯一方法是关闭阴影 DOM，这有点违背了目的。

Answer 1

经过大量搜索（询问之前）和很少搜索（询问之后），我找到了答案。显然 refs 在这里可用。

<canvas ref={(el) => {this.canvas = el}}>
</canvas>

Answer 2

要访问 Shadow DOM 中的元素，您必须使用 shadowRoot 属性:

@Element() el;

// ...

const canvas = this.el.shadowRoot.querySelector('canvas');

Stencil Component - use querySelector() to select element within the shadow dom