CODEWITHSUNDEEP
web-componentstenciljs
Shane Lessard
Shane Lessard

Reputation: 655

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

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.

Upvotes: 1

Views: 5695

Answers (2)

Thomas
Thomas

Reputation: 8849

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

@Element() el;

// ...

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

Upvotes: 8

Shane Lessard
Shane Lessard

Reputation: 655

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>

Upvotes: 2

Related Questions