模板组件 - 使用QuerySelector()在阴影DOM中选择元素

Question

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

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

是否可以从模板类内部选择元素？到目前为止，我设法实现的唯一方法是关闭阴影DOM，这使目标稍微打败了一点。

Answer 1

要访问影子dom中的元素，您必须使用shadowRoot属性：

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

Answer 2

在大量搜索(询问之前(和很少搜索(询问(后，我找到了答案。显然，裁判在这里是可用的。

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