Accessing Template Elements Prorgramatically in Web UI

Question

Is there any easy way to access the associated element object of an element declared in your template. For instance say I have a button on my template and I want to access the ButtonElement object so I can manipulate it programmatically.

I appreciate I could give it an ID and query for it onInsert. Is this the best practise? If so how do I stop the ID's not being unique if multiple instances of the component are used or is the query restricted to the Shadow DOM?

Answer 1

I appreciate I could give it an ID and query for it onInsert. Is this the best practise?

It's not if you have multiple of them (as you realized). Duplicate ID's do not only happen when used multiple times in the same component, but also if the component is inserted multiple times to the page.

You can always go with traditional classes:

...
<template>
  <div class="some-part-of-your-component">foo</div>
</template>
...

DivElement somePart;

inserted() {
  somePart = _root.query('.some-part-of-your-component');
}