Issue with Dart WebUI autogenerated code

Question

I have issue with auto generated code for web components. Here is piece of HTML:

<div id="hidden-ui">
  <div id="auth-form" class="...">
    ...
    <to-button></to-button>
  </div>
  ...
</div>

As you can see, there is custom web component called to-button:

<element name="to-button" constructor="TOSimpleButton" extends="div">
  ...
</element>

On startup I want to move #auth-form outside from parent node to document root:

Element af = document.query('#auth-form');
Element db = document.query('BODY');
db.children.add(af);

It's OK if there is no custom web-components inside movable node, but while to-button is inside I get run-time RangeError.

Here is piece of auto generated code:

 __e1 = __root.nodes[9].nodes[1].nodes[7];
 __t.component(new TOSimpleButton()..host = __e1);

As you can see, there is strict old path to component, thus RangeError exception raise.

How can I handle with this?

Answer 1

Sounds like you want to display popup forms every now and then. Here's what I do.

I specify this constructor for the dialog/popup:

var lifecycleCaller;

DialogFooComponent() {
  host = new Element.html('<x-dialog-foo></x-dialog-foo>');

  lifecycleCaller = new ComponentItem(this)
    ..create();

  document.body.children.add(host);
  lifecycleCaller.insert();
}

And as you can see, I add it to the document body. However, this only happens when creating a new instance.

Whenever I need to show that popup, I have code like this:

import '../dialog/foo/foo.dart';

...

// Later at some point I do:
new DialogFooComponent();

And what happens is that you have popup forms appearing in the body whenever you wish them to.

When you want to close the dialog, you can just call this inside the dialog component:

lifecycleCaller.remove();