Question

简单方案：在父中有2个Web组件，子。当重新插入父到其他地方时，分离的回调被称为父，并且children.clear（）在其中调用（可能是傻到这里）。在清理孩子的过程中，我发现不仅孩子的 分离 cb被调用，而且附加：

https://dartpad.dartlang.org/26921310fb7f85dee672

import 'dart:html';

void main() {

  document.registerElement("x-my", MyElement);
  document.registerElement("x-ch", MyChild);
  var container = new Element.tag("x-my");
  document.body.children.add( container );
  print("creation done");

  // just re-add container to somewhere else
  var anothercontainer = new Element.div();
  document.body.children.add( anothercontainer );
  anothercontainer.children.add(container);

}

class MyElement extends HtmlElement {
  MyElement.created() : super.created();

  @override
  attached() {
    print("attached enter ${this.outerHtml}");
    super.attached();
    children.add( new Element.tag("x-ch") );
    print("attached leave ${this.outerHtml}");
  }

   @override
  detached() {
    print("detached enter ${this.outerHtml}");
    children.clear();
    super.detached();
    print("detached leave ${this.outerHtml}");
  }
}

class MyChild extends HtmlElement {
  MyChild.created() : super.created() { this.innerHtml = "child created"; }

  @override
  attached() {
    print("attached enter ${this.outerHtml}");
    super.attached();
    print("attached leave ${this.outerHtml}");
  }

   @override
  detached() {
    print("detached enter ${this.outerHtml}");
    super.detached();
    print("detached leave ${this.outerHtml}");
  }
}

提供输出：

attached enter <x-my></x-my>
attached enter <x-ch>child created</x-ch>
attached leave <x-ch>child created</x-ch>
attached leave <x-my><x-ch>child created</x-ch></x-my>
creation done
detached enter <x-my><x-ch>child created</x-ch></x-my>
detached enter <x-ch>child created</x-ch>
detached leave <x-ch>child created</x-ch>
attached enter <x-ch>child created</x-ch> <---- my question
attached leave <x-ch>child created</x-ch>
detached enter <x-ch>child created</x-ch>
detached leave <x-ch>child created</x-ch> <---- ends here
detached leave <x-my></x-my>
attached enter <x-my></x-my>
attached enter <x-ch>child created</x-ch>
attached leave <x-ch>child created</x-ch>
attached leave <x-my><x-ch>child created</x-ch></x-my>

Answer 1

关于这个AFAIR有一个公开的问题。我认为这是由自定义元素的构造函数中的DOM修改引起的。

尝试移动

 this.innerHtml = "child created";

到attached()

在children.clear父母的独立回调中的附加回调

1 个答案: