How to process elements added or removed from DOM by Dart Web UI template

Question

In (latest) Dart Web UI, what's the best way to process an element when it's added or removed from the DOM by a template? Ideally I'd like to register a callback right in the template, but that's not a requirement.

Background: I need to register/unregister certain DOM elements from two JS libraries (one of which is a JQuery plugin). Since my template uses loops and conditionals (and data binding), elements can come and go at any time, and I can't just register them after the initial rendering.

Answer 1

It is possible to add callbacks to your component's class that trigger when it is either created, inserted into the DOM, or removed from the DOM.

Web UI Specification: Lifecycle Methods

class MyComponent extends WebComponent {

  inserted() {
    // Do stuff when inserted into DOM.
  }

  removed() {
    // Do stuff when removed from DOM.
  }
}