CODEWITHSUNDEEP
stenciljs
Nathan Tregillus
Nathan Tregillus

Reputation: 6344

Stencil @Element not finding child node

I have web component where i am trying to select a child node via the @Element property:

export class StepupVerification { @Prop() token: string = 'test'; @State() url: string = `http://localhost:8080/?fail=${this.token}`; @Element() private element: HTMLElement; ...

however, The query selector I am using on the item is returning zero children when I know the element exists. I know because I can find it with the same selector off of document.

Here is the selector I am using: this.element.querySelectorAll('.stepup-frame'); as I said, it returns zero elements. however when I use: document.querySelectorAll('.stepup-frame'); I am finding the element fine.

TL;DR: querySelector on an element is not working correctly for my webcomponent, and I am not sure why.

Upvotes: 0

Views: 2039

Answers (1)

Nathan Tregillus
Nathan Tregillus

Reputation: 6344

I was really looking to use the ref functionality to get references to embedded elements.

i was able to add a private myElement: HTMLElement variable to my component, and then reference it via this.myElement within my code.

Upvotes: 2

Related Questions