Stencil 组件 - 使用 querySelector() 选择 shadow dom 内的元素

Question

我正在创建一个包装我一直在使用的画布库的组件，以使其在我的一些应用程序之间可移植，并使其功能/样式在应用程序之间保持一致。

问题是，库的一部分要求我将画布元素作为类的参数传递。

是否可以从模板类中选择元素？到目前为止，我设法完成它的唯一方法是关闭 shadow DOM，这有点违背了目的。

Answer 1

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

@Element() el;

// ...

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