When is the removed lifecycle method called for Dart web components?

Question

Latest edit:

This is an open issue in web-ui: https://github.com/dart-lang/web-ui/issues/245

Previously:

I'm trying to figure out how to get removed() from the web component lifecycle methods to be called. Looking through the generated code for my below example, I see there's a call to autogenerated.dispatch(); after replaceElement() which I hoped would be what calls removed(), but I don't see my print statement output.

Maybe related: I glanced through the spec trying to understand what the output of build.dart is doing for the lifecycle methods. Perhaps the spec is out of date? I still don't see composeChildren() listed in the instantiation section of the spec (which is mentioned in this web-ui issue comment) even though composeChildren() gets called in the autogenerated code from build.dart.

The reason behind this question is my interest in a Dart webapp able to load and unload web components within a single parent html file programmatically (via the instantiation instructions in the spec), instead of having to declare web components in the html. I'm running with web_ui-0.2.11. Thanks!

webcomponent:

<!DOCTYPE html>
<html><body>
<element name="x-lifecycle-test" constructor="LifecycleTest" extends="div">
  <template> {{foo}} </template>
  <script type="application/dart">
    import 'dart:html';
    import 'package:web_ui/web_ui.dart';
    var foo = "testing lifecycle methods";
    class LifecycleTest extends WebComponent{
      inserted() => print("inserted");
      removed() => print("removed");
    } 
  </script>
</element>
</body></html>

Parent html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><title>Lifecycle</title>
    <link rel="components" href="lifecycle_test.html">
  </head>
  <body>
    <div>
      <button on-click="replaceElement()">replace element</button>
    </div>
    <div id='holder'>
        <x-lifecycle-test></x-lifecycle-test>
    </div>

    <script type="application/dart">  
      import 'dart:html';
      void replaceElement() {
        query('#holder').replaceWith(new DivElement()
                                        ..id = 'holder'
                                        ..text = 'replaced');
      }
      main() {} 
    </script>
    <script type='text/javascript' src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

Shailen Tuli Shailen Tuli · Accepted Answer · 2013-12-27T18:51:54

Adding an answer here for completeness: web components are used in Dart using Polymer. When an instance of a custom element is removed from the DOM, the leftView life cycle method triggers. You can read more about this at https://www.dartlang.org/docs/tutorials/polymer-intro/#life-cycle-methods.

When is the removed lifecycle method called for Dart web components?

1 Answers