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

0
votes

I'm creating a component that is wrapping a canvas library I've been using, to make it portable between a few of my applications and scope it's functionality/style to be consistent across applications.

The problem is, part of the library requires me to pass the canvas element as a parameter for a class.

Is it possible to select the element from inside the stencil class? The only way I've managed to accomplish it so far is by turning off the shadow DOM, which defeats the purpose a little bit.

2
web-componentstenciljs

2 Answers

6
votes

To access elements in the Shadow DOM you have to use the shadowRoot property:

@Element() el;

// ...

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

After much searching (before asking) and very little searching (after asking) I've found an answer. Apparently refs are usable here. 

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