Lesson: 30 | Access Elements the Component Owns

Notes
Video

Notes

<template>
   <div>First<slot name="task1">Task 1</slot></div>
   <div>Second<slot name="task2">Task 2</slot></div>
</template>

To access elements rendered by a component, use;

this.template.querySelector();
this.template.querySelectorAll();

import { LightningElement } from 'lwc';

export default class Example extends LightningElement {
    renderedCallback() {
        this.template.querySelector('div'); // <div>First</div>
        this.template.querySelector('span'); // null
        this.template.querySelectorAll('div'); // [<div>First</div>, <div>Second</div>]
    }
}

The order of elements is not guaranteed.
Elements not rendered to the DOM aren’t returned in the querySelector result.

this.template.querySelector('span');

Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID.

Prev You need to login to have access to the quizzes. Next

Mastered by 9 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 30 | Access Elements the Component Owns

Notes

Lightning Web Components