From 47d95f987cc62d8b22d24561ce89b1eddeb72f1e Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 18 Apr 2022 16:20:56 +0800
Subject: [PATCH 01/21] :bug: fix: fix err of textNode attach to WidgetElement.

---
 kraken/lib/src/dom/text_node.dart | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index b93fb728cc..e07966d87a 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -6,6 +6,8 @@ import 'package:kraken/dom.dart';
 import 'package:kraken/rendering.dart';
 import 'package:kraken/foundation.dart';
 
+import '../../kraken.dart';
+
 const String WHITE_SPACE_CHAR = ' ';
 const String NEW_LINE_CHAR = '\n';
 const String RETURN_CHAR = '\r';
@@ -80,7 +82,10 @@ class TextNode extends Node {
 
     createRenderer();
 
-    if (parent.renderBoxModel is RenderLayoutBox) {
+    // If element attach WidgetElement, render object should be attach to render tree when mount.
+    if (parent is WidgetElement) {
+      _applyTextStyle();
+    } else if (parent.renderBoxModel is RenderLayoutBox) {
       RenderLayoutBox parentRenderLayoutBox = parent.renderBoxModel as RenderLayoutBox;
       parentRenderLayoutBox = parentRenderLayoutBox.renderScrollingContent ?? parentRenderLayoutBox;
       parentRenderLayoutBox.insert(_renderTextBox!, after: after);

From 31874e851dc34575558af8b81b665523c83dc314 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 18 Apr 2022 16:24:19 +0800
Subject: [PATCH 02/21] :arrow_up: chore: modify import.

---
 kraken/lib/src/dom/text_node.dart | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index e07966d87a..98977d46e5 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -5,8 +5,7 @@ import 'package:flutter/rendering.dart';
 import 'package:kraken/dom.dart';
 import 'package:kraken/rendering.dart';
 import 'package:kraken/foundation.dart';
-
-import '../../kraken.dart';
+import 'package:kraken/widget.dart';
 
 const String WHITE_SPACE_CHAR = ' ';
 const String NEW_LINE_CHAR = '\n';

From 7c534e24e020e5aff7e37f0b561a03261a798a7a Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 18 Apr 2022 18:08:55 +0800
Subject: [PATCH 03/21] :white_check_mark: test: add test.

---
 integration_tests/specs/dom/elements/custom-element.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/integration_tests/specs/dom/elements/custom-element.ts b/integration_tests/specs/dom/elements/custom-element.ts
index fa1de71b44..1c985a3108 100644
--- a/integration_tests/specs/dom/elements/custom-element.ts
+++ b/integration_tests/specs/dom/elements/custom-element.ts
@@ -48,6 +48,14 @@ describe('custom widget element', () => {
     await snapshot();
   });
 
+  it('text node should be child of flutter container and append before container append to body', async () => {
+    const container = document.createElement('flutter-container');
+    const text = document.createTextNode('text');
+    container.appendChild(text);
+    document.body.appendChild(container);
+    await snapshot();
+  });
+
   it('element should be child of flutter container', async () => {
     const container = document.createElement('flutter-container');
     const element = document.createElement('div');

From 172512e3670271bbe7177d22af6be636f26242df Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 18 Apr 2022 19:46:18 +0800
Subject: [PATCH 04/21] :art: chore: modify attachTo.

---
 kraken/lib/src/dom/text_node.dart | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index 98977d46e5..2534938e62 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -82,14 +82,14 @@ class TextNode extends Node {
     createRenderer();
 
     // If element attach WidgetElement, render object should be attach to render tree when mount.
-    if (parent is WidgetElement) {
-      _applyTextStyle();
-    } else if (parent.renderBoxModel is RenderLayoutBox) {
+    if (parent is! WidgetElement && parent.renderBoxModel is RenderLayoutBox) {
       RenderLayoutBox parentRenderLayoutBox = parent.renderBoxModel as RenderLayoutBox;
       parentRenderLayoutBox = parentRenderLayoutBox.renderScrollingContent ?? parentRenderLayoutBox;
       parentRenderLayoutBox.insert(_renderTextBox!, after: after);
       _applyTextStyle();
     }
+
+    _applyTextStyle();
   }
 
   // Detach renderObject of current node from parent

From b525640bf463ccd4b526ef2e5ad4f029807702c1 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 18 Apr 2022 19:53:01 +0800
Subject: [PATCH 05/21] :bug: fix: remove _applyTextStyle.

---
 kraken/lib/src/dom/text_node.dart | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index 2534938e62..7aff66c07d 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -86,7 +86,6 @@ class TextNode extends Node {
       RenderLayoutBox parentRenderLayoutBox = parent.renderBoxModel as RenderLayoutBox;
       parentRenderLayoutBox = parentRenderLayoutBox.renderScrollingContent ?? parentRenderLayoutBox;
       parentRenderLayoutBox.insert(_renderTextBox!, after: after);
-      _applyTextStyle();
     }
 
     _applyTextStyle();

From a410cd3f21700cb106fac66aade932559e33201a Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Wed, 20 Apr 2022 20:01:13 +0800
Subject: [PATCH 06/21] :bug: fix: If element is WidgetElement, children should
 be mounted and insert render object by flutter framework..

---
 kraken/lib/src/dom/element.dart | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 4e23f0e673..5adf13ebb5 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -466,8 +466,10 @@ abstract class Element
   @override
   void didAttachRenderer() {
     super.didAttachRenderer();
-    // Ensure that the child is attached.
-    ensureChildAttached();
+    if (this is! WidgetElement) {
+      // Ensure that the child is attached.
+      ensureChildAttached();
+    }
   }
 
   @override

From 71e4e1efb5e4fcfe3a2c181e23f18d66ae292977 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 16:14:45 +0800
Subject: [PATCH 07/21] :bug: fix: children of WidgetElement should insert RO
 by Flutter Framwork.

---
 kraken/lib/src/dom/node.dart                         | 2 --
 kraken/lib/src/widget/widget_to_element_adaptor.dart | 2 --
 2 files changed, 4 deletions(-)

diff --git a/kraken/lib/src/dom/node.dart b/kraken/lib/src/dom/node.dart
index 63ce8ddb5b..d372da47dc 100644
--- a/kraken/lib/src/dom/node.dart
+++ b/kraken/lib/src/dom/node.dart
@@ -161,7 +161,6 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
   void willAttachRenderer() {}
 
   @override
-  @mustCallSuper
   void didAttachRenderer() {
     // The node attach may affect the whitespace of the nextSibling and previousSibling text node so prev and next node require layout.
     if (renderer is RenderBoxModel) {
@@ -170,7 +169,6 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
   }
 
   @override
-  @mustCallSuper
   void willDetachRenderer() {
     // The node detach may affect the whitespace of the nextSibling and previousSibling text node so prev and next node require layout.
     if (renderer is RenderBoxModel) {
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 34b8126391..8c01023259 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -194,8 +194,6 @@ abstract class WidgetElement extends dom.Element {
 
   @override
   void didAttachRenderer() {
-    super.didAttachRenderer();
-
     _attachWidget(_widget);
   }
 

From 15f1b9822de0e9f29f7ca8103f79dce8b7d2101d Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 16:15:40 +0800
Subject: [PATCH 08/21] :bulb: chore: add comment, Children of WidgetElement
 should insert render object by Flutter Framework..

---
 kraken/lib/src/widget/widget_to_element_adaptor.dart | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 8c01023259..16fb32887a 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -194,6 +194,7 @@ abstract class WidgetElement extends dom.Element {
 
   @override
   void didAttachRenderer() {
+    // Children of WidgetElement should insert render object by Flutter Framework.
     _attachWidget(_widget);
   }
 

From 55641c77e58b668ca0d0e748befc4df4923270ab Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 16:17:11 +0800
Subject: [PATCH 09/21] :sparkles: feat should call buildScope in
 attachToRenderTree.

---
 kraken/lib/src/dom/element.dart                   |  6 ++----
 .../lib/src/widget/widget_to_element_adaptor.dart | 15 ++++-----------
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 5adf13ebb5..4e23f0e673 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -466,10 +466,8 @@ abstract class Element
   @override
   void didAttachRenderer() {
     super.didAttachRenderer();
-    if (this is! WidgetElement) {
-      // Ensure that the child is attached.
-      ensureChildAttached();
-    }
+    // Ensure that the child is attached.
+    ensureChildAttached();
   }
 
   @override
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 16fb32887a..70f56c4030 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -40,7 +40,7 @@ class KrakenRenderObjectToWidgetAdapter<T extends RenderObject> extends RenderOb
 
   /// Inflate this widget and actually set the resulting [RenderObject] as the
   /// child of [container].
-  KrakenRenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, RenderObjectElement parentElement, bool needBuild) {
+  KrakenRenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, RenderObjectElement parentElement) {
     Element? element;
 
     owner.lockState(() {
@@ -48,18 +48,11 @@ class KrakenRenderObjectToWidgetAdapter<T extends RenderObject> extends RenderOb
       assert(element != null);
     });
 
-    // If renderview is building,skip the buildScope phase.
-    if (!needBuild) {
+    owner.buildScope(element!, () {
       if (element != null) {
         element?.mount(parentElement, null);
       }
-    } else {
-      owner.buildScope(element!, () {
-        if (element != null) {
-          element?.mount(parentElement, null);
-        }
-      });
-    }
+    });
 
     return element! as KrakenRenderObjectToWidgetElement<T>;
   }
@@ -256,7 +249,7 @@ abstract class WidgetElement extends dom.Element {
       parentFlutterElement = (parentNode as dom.Element).flutterElement;
     }
 
-    renderObjectElement = adaptor.attachToRenderTree(rootFlutterElement.owner!, (parentFlutterElement ?? rootFlutterElement) as RenderObjectElement, parentFlutterElement == null);
+    renderObjectElement = adaptor.attachToRenderTree(rootFlutterElement.owner!, (parentFlutterElement ?? rootFlutterElement) as RenderObjectElement);
   }
 
   void deactivate() {

From 0fa0c9acf2ef4cfaad90cf83696f6a2fdb5dd526 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 16:41:57 +0800
Subject: [PATCH 10/21] :sparkles: feat: add ensureChildApplyStyle.

---
 kraken/lib/src/dom/element.dart               | 20 +++++++++++++++++++
 .../src/widget/widget_to_element_adaptor.dart |  1 +
 2 files changed, 21 insertions(+)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 4e23f0e673..4980387766 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -765,6 +765,26 @@ abstract class Element
     renderBoxModel = null;
   }
 
+  void applyStyle() {
+    _applyStyle(style);
+
+    if (renderer != null) {
+      // Flush pending style before child attached.
+      style.flushPendingProperties();
+    }
+  }
+
+  void ensureChildApplyStyle() {
+    if (isRendererAttached) {
+      for (Node child in childNodes) {
+        if (child is Element) {
+          child.applyStyle();
+          child.ensureChildApplyStyle();
+        }
+      }
+    }
+  }
+
   @override
   void ensureChildAttached() {
     if (isRendererAttached) {
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 70f56c4030..be599ceb8e 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -189,6 +189,7 @@ abstract class WidgetElement extends dom.Element {
   void didAttachRenderer() {
     // Children of WidgetElement should insert render object by Flutter Framework.
     _attachWidget(_widget);
+    ensureChildApplyStyle();
   }
 
   @override

From fdb97f0445bb5211b8d7aca05c647b428913ef22 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 16:59:50 +0800
Subject: [PATCH 11/21] :sparkles: feat: remove ensureChildApplyStyle and move
 apply style to KrakenElementToFlutterElementAdaptor.

---
 kraken/lib/src/dom/element.dart                      | 11 -----------
 kraken/lib/src/widget/element_to_widget_adaptor.dart |  3 ++-
 kraken/lib/src/widget/widget_to_element_adaptor.dart |  1 -
 3 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 4980387766..495b1a6d72 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -774,17 +774,6 @@ abstract class Element
     }
   }
 
-  void ensureChildApplyStyle() {
-    if (isRendererAttached) {
-      for (Node child in childNodes) {
-        if (child is Element) {
-          child.applyStyle();
-          child.ensureChildApplyStyle();
-        }
-      }
-    }
-  }
-
   @override
   void ensureChildAttached() {
     if (isRendererAttached) {
diff --git a/kraken/lib/src/widget/element_to_widget_adaptor.dart b/kraken/lib/src/widget/element_to_widget_adaptor.dart
index 8174f77d52..1c3e6369a9 100644
--- a/kraken/lib/src/widget/element_to_widget_adaptor.dart
+++ b/kraken/lib/src/widget/element_to_widget_adaptor.dart
@@ -37,7 +37,8 @@ class KrakenElementToFlutterElementAdaptor extends RenderObjectElement {
     widget._krakenNode.ensureChildAttached();
 
     if (widget._krakenNode is dom.Element) {
-      (widget._krakenNode as dom.Element).style.flushPendingProperties();
+      dom.Element element = (widget._krakenNode as dom.Element);
+      element.applyStyle();
     }
   }
 
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index be599ceb8e..70f56c4030 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -189,7 +189,6 @@ abstract class WidgetElement extends dom.Element {
   void didAttachRenderer() {
     // Children of WidgetElement should insert render object by Flutter Framework.
     _attachWidget(_widget);
-    ensureChildApplyStyle();
   }
 
   @override

From 67a02452fb75c27506c1e9c0ea4af8a18a5c4f88 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 17:55:12 +0800
Subject: [PATCH 12/21] :rewind: revert: needBuild.

---
 .../lib/src/widget/widget_to_element_adaptor.dart  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 70f56c4030..2b69479f37 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -40,7 +40,7 @@ class KrakenRenderObjectToWidgetAdapter<T extends RenderObject> extends RenderOb
 
   /// Inflate this widget and actually set the resulting [RenderObject] as the
   /// child of [container].
-  KrakenRenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, RenderObjectElement parentElement) {
+  KrakenRenderObjectToWidgetElement<T> attachToRenderTree(BuildOwner owner, RenderObjectElement parentElement, bool needBuild) {
     Element? element;
 
     owner.lockState(() {
@@ -48,11 +48,17 @@ class KrakenRenderObjectToWidgetAdapter<T extends RenderObject> extends RenderOb
       assert(element != null);
     });
 
-    owner.buildScope(element!, () {
+    if (!needBuild) {
       if (element != null) {
         element?.mount(parentElement, null);
       }
-    });
+    } else {
+      owner.buildScope(element!, () {
+        if (element != null) {
+          element?.mount(parentElement, null);
+        }
+      });
+    }
 
     return element! as KrakenRenderObjectToWidgetElement<T>;
   }
@@ -249,7 +255,7 @@ abstract class WidgetElement extends dom.Element {
       parentFlutterElement = (parentNode as dom.Element).flutterElement;
     }
 
-    renderObjectElement = adaptor.attachToRenderTree(rootFlutterElement.owner!, (parentFlutterElement ?? rootFlutterElement) as RenderObjectElement);
+    renderObjectElement = adaptor.attachToRenderTree(rootFlutterElement.owner!, (parentFlutterElement ?? rootFlutterElement) as RenderObjectElement, parentFlutterElement == null);
   }
 
   void deactivate() {

From 17a08f742e95b9bab94bd340b2281621d5fa90b7 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 19:12:51 +0800
Subject: [PATCH 13/21] :construction_worker: chore: modify img.

---
 .../elements/custom-element.ts.9319a30e1.png  | Bin 3117 -> 3143 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/integration_tests/snapshots/dom/elements/custom-element.ts.9319a30e1.png b/integration_tests/snapshots/dom/elements/custom-element.ts.9319a30e1.png
index cb8fecab8b68acc42972d4b129f1599dac3f2bf2..43b7f7f9363859e002e95ecfd6378c792cd98bd0 100644
GIT binary patch
delta 990
zcmV<410npa7{?fpL4WZ{L_t(|obBDci(Pddz~S%A-UM{T!H9}(L|6hArVxvrAdI4G
zCH9KQHoBdiMPP06KUhR0_%g5&QLqwJQbdKwA}ELf3lUPJvCu%WFq(<kVj=9BJK49e
z`Jm5J-TOP-@A*|94)<KnT{-vr-(4JFsb3%a%eCGDzhJA^dVd1|EGN(aQ34GRCC~s-
zi)D*$jPOhJ*GJZ`^%mftxPk_V5@>)Zfd+`$G0<Oq_0@dv!3S6EL|1zrz|Y-|f&T2X
z&*sfH-@Ixky4v#qe(rwtr{DhO&`%ftd|@#ke)!>RZ*R}BW5;H7b#?ab+cy_3T$rOr
zkIt*FzB=!`^MB5qK7D%bx#yl)EEco5xj9FV9-WPijae)f^X<3a&hyVdKf8AAn&Zch
zFP#S^=QodBwzm5Zf4l}efxlaN1--GcF?Zj6_pGk2&XZ3*Is5nTpP8B0UVCjm`sky1
z=%I(^(MKPhPd@o%4j(=|Gc%7p_Sl>`b7tOp>#doY*?-*JoYmFUdEkKucAN*m&X)cT
zdf&c%bLX9R&evamJqHdPn3<Wat*!a^<B#X5r=FSzAAE3TW^TIara5xt$ecZUcJ}Pq
zGmk(1_`Lr5>$7Lio;i8)<QzPBa2AWj(s=+}+0sBSbL!NonVC6${P>(ad2(iEzWeUG
zOUL%_-+w<3Km72VIB{a$e*5j&*x2wj2EhN|-wyQm-+w<dGq>Dw%dD-f&CJY=H{Lkc
zU3cB3_cJp$-+c3&I(2HUzyA8Gyj6f-mMaGO#~**Z^!l#5?wXmI`|rPh?!EWkOUKWg
zIddt{UwrY!eER99v%bDQ@4ffl95`@b_U_%gbblTISGMEN>~6pP_Bnt4{G2#(V$PmD
zJ8Nrevv=>_dHLm+=kw1$pVOyL&x<d<I0p|NoO9>S&DPe|y!6sbv%bDQPe1+i+;-b-
zbNKM#OHuymJOHk2$3WkA-+goIt+&oAue>tvzyJQs%sltpb92WXcgzbfyfB9j9hxt{
z{C{$uefHT|TU(nq-gslSx3}ksC!Uy<m6dtsnP=vkZ@!s#-+gz-c>wHeW!Ya|{o~W@
ze)!>s*|lretgNhDTHD^<o~^B|x#5Nz{^Juan+FBUo@VFCj$BLs@+RT#-McUU&|>jl
z#d)WB09?+)k^rIv8X!ub0ipyNAWEPCqO-sQFandn10N`Av25|LkF5W{_W{69xPk_V
z5@>)Zfd+^YXn?4dix)3myw;ll;Bv0Bp#x6>v%mu|0<*vafdLl&2I-d&kWNfo)Bpeg
M07*qoM6N<$f|h_Ii~s-t

literal 3117
zcmeAS@N?(olHy`uVBq!ia0y~yV9a1(U~1rC1Bz^vdbAu!F%}28J29*~C-V}>VJUX<
z4B-HR8jh3>1_tiyo-U3d6?5L+-rpUUD%J2Xz3t=i9gh-3Tn%rq<TQ1(3b$yau{vJX
zUNluR_~w${2lWXP6%-GeIEv(iZj)@8;o70V7tvwR+S|$|lz7GPW?n*RPTAx$zI)ca
z`hAa?KmYSxnRAu<Tebh!yt>6;{p<Mte|v97KgiE1+-}Zr;2evTg4Y7ZML;SmbGfU&
z+YjqsKYw1mdynalc=-i}Kqg)RRS;F%T>Ja&_RZV2O`FSJ!uf^w+tcas=h)?ICIGp*
zZ@z@*FSl6NZ=8PaOe?qevsYJFZ{D-VMt|>@OM5;X;{N>m{r>Yii=RJxbhLZ()~%-f
z_WyqD`S<H}@p0MmGdDM<r`Oij-m7}OcIW4F*3Xa2*U#C0zpk23-p)o^TH5;D<6k#k
zinQNn+I>>?3vbDX2L~(PY&@P;SXdZW`}OM0{q_IPoZ0jJUiIgj>GRJPpSLyF-}mED
z&BvqS#gC43&YWpk^W#Izu98f<KOYVQdDY+E=;-O4Gd^$gdHUyu=*xZ27wokA_V%`U
z_4jvk-|zdK$0uW9U~D{l_Uz9;pU*#^y?(FRdAr|l&YZbZ{eExpt1Bya*8KeR2I%Iv
zx}Q%i%irArv9Ddf{`|(q<jq^QY<X<+;F{_M^P9(x9XoSo&DynRfBpJ(=FFcjm;G;F
z|MvdAeLJ7*tk2KSpLdt9HDTwMn^XJy+uK`pjdzuSdi3}IF)}v(e!u?znl)?AoH=9r
z{f_bJ)2DCWPfvTd`~AL~H*U<>{ccxw_&3fsc8&Wu*TwDK_4nsRclo(9XD**#S2eHV
zQRmy&)AeF+@qM`-UvDd}A2;Xf)vG_BO!j|vppp6W3FZDb7W_L(D?KZkZNFS_{(L)s
z|Jk3PpFjWf^z`OUn~XpqaCy1^`SAE!Q=l9E&atU1>XWrL3ttyA^X%EPmEZ4{r<azN
z-m7@rTlwK2`|~56!nXteK|Oq9vcH`rzs-jOb1aL~?EZeaJacB{=d<R|AGXWSE5BEn
z-Y0KwcfaQISsB}^lCZF_XMexnpTBnP+RCR>!_yKI6Z>Q=jqHIjRP*QK@p?=C9j2D-
zwUht+dcD5*cJB7GhYlV3cI(=;YdLv&=kAu@uZ?~7@qZ!TEUEJg@+Sd3@z+1w+uQqp
z@SOiyas}BRJD6b!8k(+0snGy|7jjfc4AaV@{s4=}*?ajJ{vD7tahT%3?7|75bYpgx
zy}gx}&(vUF%nmI%M=4kxG8z)2Apvhtj3$QB#4xNA!&mw33q=;)%Xs(#*yLyMboFyt
I=akR{05(?QP5=M^


From d37e1298ddcee9322e01bda89988f446d89b2145 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 19:21:16 +0800
Subject: [PATCH 14/21] :construction_worker: chore: add img.

---
 .../dom/elements/custom-element.ts.2e7e71191.png | Bin 0 -> 3272 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 integration_tests/snapshots/dom/elements/custom-element.ts.2e7e71191.png

diff --git a/integration_tests/snapshots/dom/elements/custom-element.ts.2e7e71191.png b/integration_tests/snapshots/dom/elements/custom-element.ts.2e7e71191.png
new file mode 100644
index 0000000000000000000000000000000000000000..f39b9c2de3830b81649c01d0031a6b268736be6b
GIT binary patch
literal 3272
zcmeHKZA?>F7{0)QOs#Gsfkcq%l;{>qgGDOxp&}C*87P`D#Zm@B{h}=vg!0i^nV{<i
z*|O;>r5$q)+<*oeC<RJk43TkrI|b#dKmqCHqqLN3TS{BH>p%D3AN$ew&y#cBb8?>Z
z<T+1r?wpK^#%$cS5dZ*8%!#N30C2eo0IoMY+|ikaZPV2#xG)l;BY}FzcOD(Q!-$MI
z<AGM8$A#Mfu=!d{)X_6}{3TUj&5K#TPJ^&C>8sRJzZ}C&ee|pE?_EB}i|KgW(~~L1
z^viqyu0l&%RYLzJGP`ESxeuR|l<e5KnR@i}ffLf*ULm{l{Sy#b_pIMsGKp$_X&!~$
z^eglUta63LgbD<Xvu3m0#tiKA&s<%mCFXCkad4!03_!o+ih0lfAK(-U#_CwyTDJ!~
zisH!E|2W}l``R<;$PY){qTYQ2MBj-iN~k$=Ow-A6b0ms6TR6$PV5Ly_Ai5lSbh>(7
zl;O7BRpuUHTke*cC)g8@il%OPXIM>3$TSxZfgoOP+rMF}AHPl4dgVo35^;#kwuh}e
z*@Y}gCeb!USQI=ap$QX{nX`!mA!}`ZM9P4D4`t6aiaCF9kBB%)G+B;GJ3=53%#&<K
zm}xkTp$s>JAh;-!N5n^1Uhc!=l|HogK)meLGvAPF7j$j<4k>-=Pwj9+ny$mDV`_L5
z4Z2vs;~gvAqFA?EDe39yx|W%;e#pH(U@^d`KOP>lI#zio=Q6e3@R(_ty$4HSK@y3a
zoGkdPB3Mx^WVN=M)~$Nwv8~}j*rHcYwWCc};sjwK{r&yowB9nNc{~?3jnRaeW6g@G
z?o!I7OY@ClOJ;y^ca_pL@tHr?n2~9-AxZ{Hin%&f3jcM-ld&-P$YSWl!mEZE0s$G%
zom7CJMo|H)yNZ#y2jvh{848zTSwHQHE(4!^PtH@9NBzu>-V-n2^LRy8lcJ-@`uPx%
zsydh?p;n?i>*|*#WChLC@k8Vy<MZ0uS};>GZfetew>0|pv7(9N*#jV`9dFAm!yb;P
zju#5J-gsz!pc<~Ab?`R$<)s)YlPv2}$aU?oiV0UDnhF}^O)kuO*o-;9(^Yo7UaGmz
z<AvnvR12eP#zjj1T^urdj||}?s{KAhDnDoOg}t{Ro_{bfKHNAMwyG{h`t}IHySO9`
zdQIUb?|}2ygXzZi=MFS}*<CWyk~PzgK%tD)<*DbM%VK3jD3)zAyrx~Cml3gr%U!-<
zd2~VE^quEs9m*QwhY&;^YYQrRH-@3^<XBKW6Xjk~)m8P!$ZNM7^!RmRa=}tl54bNQ
zqk*Cn^rSX?VS6<Y&xM6-R*s!4BDGz|d2xHD>m(EBKrq#@ZkOM0DlqHN9c6yu`6DB?
z;D}9wEg6!>sQ5$*#OGmrg29|2lBAVonC`Kl9)N8YM9f4qXXPxr<7%*D`;fLKi<|Z>
z2|ZZeT4}(?#>O%b1yR&@RlT4Ny?A3U$NlyPPH;-__FPbNm~`2oCF|`nvrDHu>*kvV
ztI6T^q-H%Nx^%Ly{iosdq4Oy^W5^jpZ!d<NiSj>Bl(h|?KD-t5o8HPme<MK5Cvj2r
IktsL-1zSlKUH||9

literal 0
HcmV?d00001


From 283b944ef0876886dc6d6fe1db24f585294749a7 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Thu, 21 Apr 2022 20:07:24 +0800
Subject: [PATCH 15/21] :construction_worker: chore: modify test.

---
 .../elements/custom-element.ts.633308271.png  | Bin 5106 -> 4970 bytes
 .../specs/dom/elements/custom-element.ts      |   1 +
 2 files changed, 1 insertion(+)

diff --git a/integration_tests/snapshots/dom/elements/custom-element.ts.633308271.png b/integration_tests/snapshots/dom/elements/custom-element.ts.633308271.png
index 00965cc9aafd067d42da8b1b983c6ce4c1b4065c..c184a2eed18f0ef492c807d2c6217a1f0006390a 100644
GIT binary patch
delta 2862
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
YTV;_Z?9r234WPgt5BT=wvG6PZ1$bv8kpKVy

delta 3000
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
C5_i}D

diff --git a/integration_tests/specs/dom/elements/custom-element.ts b/integration_tests/specs/dom/elements/custom-element.ts
index 1c985a3108..80581e3ab7 100644
--- a/integration_tests/specs/dom/elements/custom-element.ts
+++ b/integration_tests/specs/dom/elements/custom-element.ts
@@ -83,6 +83,7 @@ describe('custom widget element', () => {
 
     const element = document.createElement('div');
     element.style.backgroundColor = 'red';
+    element.style.textAlign = 'center';
     element.appendChild(document.createTextNode('div element'));
     container.appendChild(element);
 

From 4c6fafa780df57cd3428912280679a047c3e072f Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 25 Apr 2022 11:17:26 +0800
Subject: [PATCH 16/21] :sparkles: feat: add isManageRenderBoxBySelf.

---
 kraken/lib/src/dom/element.dart                      | 8 ++++----
 kraken/lib/src/dom/node.dart                         | 3 +++
 kraken/lib/src/dom/text_node.dart                    | 2 +-
 kraken/lib/src/widget/widget_to_element_adaptor.dart | 3 +++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 495b1a6d72..5e320c909f 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -735,7 +735,7 @@ abstract class Element
 
     if (renderer != null) {
       // If element attach WidgetElement, render object should be attach to render tree when mount.
-      if (parent is! WidgetElement) {
+      if (parent.isManageRenderBoxBySelf) {
         RenderBoxModel.attachRenderBox(parent.renderer!, renderer!, after: after);
       }
 
@@ -806,7 +806,7 @@ abstract class Element
     RenderLayoutBox? renderLayoutBox = _renderLayoutBox;
     if (isRendererAttached) {
       // Only append child renderer when which is not attached.
-      if (!child.isRendererAttached && renderLayoutBox != null && this is! WidgetElement) {
+      if (!child.isRendererAttached && renderLayoutBox != null && isManageRenderBoxBySelf) {
         RenderBox? after;
         RenderLayoutBox? scrollingContentBox = renderLayoutBox.renderScrollingContent;
         if (scrollingContentBox != null) {
@@ -978,8 +978,8 @@ abstract class Element
     _updateRenderBoxModel();
     // Attach renderBoxModel to parent if change from `display: none` to other values.
     if (!isRendererAttached && parentElement != null && parentElement!.isRendererAttached) {
-      // If element attach WidgetElement, render obeject should be attach to render tree when mount.
-      if (parentNode is! WidgetElement) {
+      // If element attach WidgetElement, render object should be attach to render tree when mount.
+      if (parentElement!.isManageRenderBoxBySelf) {
         RenderBoxModel _renderBoxModel = renderBoxModel!;
         // Find the renderBox of its containing block.
         RenderBox? containingBlockRenderBox = getContainingBlockRenderBox();
diff --git a/kraken/lib/src/dom/node.dart b/kraken/lib/src/dom/node.dart
index d372da47dc..40cde02242 100644
--- a/kraken/lib/src/dom/node.dart
+++ b/kraken/lib/src/dom/node.dart
@@ -88,6 +88,9 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
   // https://dom.spec.whatwg.org/#dom-node-ownerdocument
   late Document ownerDocument;
 
+  // The render object is inserted by Flutter framework when element is WidgetElement, so kraken need not manage render object when changed.
+  bool isManageRenderBoxBySelf = true;
+
   /// The Node.parentElement read-only property returns the DOM node's parent Element,
   /// or null if the node either has no parent, or its parent isn't a DOM Element.
   Element? get parentElement {
diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index 7aff66c07d..4e48eb2047 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -82,7 +82,7 @@ class TextNode extends Node {
     createRenderer();
 
     // If element attach WidgetElement, render object should be attach to render tree when mount.
-    if (parent is! WidgetElement && parent.renderBoxModel is RenderLayoutBox) {
+    if (parent.isManageRenderBoxBySelf && parent.renderBoxModel is RenderLayoutBox) {
       RenderLayoutBox parentRenderLayoutBox = parent.renderBoxModel as RenderLayoutBox;
       parentRenderLayoutBox = parentRenderLayoutBox.renderScrollingContent ?? parentRenderLayoutBox;
       parentRenderLayoutBox.insert(_renderTextBox!, after: after);
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 2b69479f37..65d358b263 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -186,6 +186,9 @@ abstract class WidgetElement extends dom.Element {
 
   Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children);
 
+  @override
+  bool isManageRenderBoxBySelf = false;
+
   @override
   void didDetachRenderer() {
     super.didDetachRenderer();

From 5f12cc5d38e9f7cb84adf1bf6912105d520e5e21 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 25 Apr 2022 11:29:37 +0800
Subject: [PATCH 17/21] :art: chore: modify applyStyle.

---
 kraken/lib/src/dom/element.dart                   | 15 +++------------
 .../lib/src/widget/element_to_widget_adaptor.dart |  7 ++++++-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 5e320c909f..63d76ff602 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -723,7 +723,7 @@ abstract class Element
   // Attach renderObject of current node to parent
   @override
   void attachTo(Node parent, {RenderBox? after}) {
-    _applyStyle(style);
+    applyStyle(style);
 
     if (parentElement?.renderStyle.display == CSSDisplay.sliver) {
       // Sliver should not create renderer here, but need to trigger
@@ -765,15 +765,6 @@ abstract class Element
     renderBoxModel = null;
   }
 
-  void applyStyle() {
-    _applyStyle(style);
-
-    if (renderer != null) {
-      // Flush pending style before child attached.
-      style.flushPendingProperties();
-    }
-  }
-
   @override
   void ensureChildAttached() {
     if (isRendererAttached) {
@@ -1408,7 +1399,7 @@ abstract class Element
     style.setProperty(property, value, true);
   }
 
-  void _applyStyle(CSSStyleDeclaration style) {
+  void applyStyle(CSSStyleDeclaration style) {
     // Apply default style.
     _applyDefaultStyle(style);
     // Init display from style directly cause renderStyle is not flushed yet.
@@ -1423,7 +1414,7 @@ abstract class Element
     if (renderBoxModel != null && classList.isNotEmpty) {
       // Diff style.
       CSSStyleDeclaration newStyle = CSSStyleDeclaration();
-      _applyStyle(newStyle);
+      applyStyle(newStyle);
       Map<String, String?> diffs = style.diff(newStyle);
       if (diffs.isNotEmpty) {
         // Update render style.
diff --git a/kraken/lib/src/widget/element_to_widget_adaptor.dart b/kraken/lib/src/widget/element_to_widget_adaptor.dart
index 1c3e6369a9..c545e13a5e 100644
--- a/kraken/lib/src/widget/element_to_widget_adaptor.dart
+++ b/kraken/lib/src/widget/element_to_widget_adaptor.dart
@@ -38,7 +38,12 @@ class KrakenElementToFlutterElementAdaptor extends RenderObjectElement {
 
     if (widget._krakenNode is dom.Element) {
       dom.Element element = (widget._krakenNode as dom.Element);
-      element.applyStyle();
+      element.applyStyle(element.style);
+
+      if (element.renderer != null) {
+        // Flush pending style before child attached.
+        element.style.flushPendingProperties();
+      }
     }
   }
 

From 8ea9cb27be61c6fecad171b30eb50f37e04dc5e1 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 25 Apr 2022 11:40:14 +0800
Subject: [PATCH 18/21] :art: chore: dealwith lint.

---
 kraken/lib/src/dom/element.dart   | 1 -
 kraken/lib/src/dom/text_node.dart | 1 -
 2 files changed, 2 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 63d76ff602..5d31b1347c 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -13,7 +13,6 @@ import 'package:kraken/css.dart';
 import 'package:kraken/dom.dart';
 import 'package:kraken/foundation.dart';
 import 'package:kraken/rendering.dart';
-import 'package:kraken/widget.dart';
 
 final RegExp _splitRegExp = RegExp(r'\s+');
 const String _ONE_SPACE = ' ';
diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index 4e48eb2047..9ce81ee19f 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -5,7 +5,6 @@ import 'package:flutter/rendering.dart';
 import 'package:kraken/dom.dart';
 import 'package:kraken/rendering.dart';
 import 'package:kraken/foundation.dart';
-import 'package:kraken/widget.dart';
 
 const String WHITE_SPACE_CHAR = ' ';
 const String NEW_LINE_CHAR = '\n';

From cf622d91774e0a1403b5b16ba86f150d129eb4b2 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 25 Apr 2022 16:25:04 +0800
Subject: [PATCH 19/21] :art: chore: modify comment.

---
 kraken/lib/src/dom/node.dart                         | 2 +-
 kraken/lib/src/widget/widget_to_element_adaptor.dart | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/kraken/lib/src/dom/node.dart b/kraken/lib/src/dom/node.dart
index 40cde02242..ca410da9a9 100644
--- a/kraken/lib/src/dom/node.dart
+++ b/kraken/lib/src/dom/node.dart
@@ -88,7 +88,7 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
   // https://dom.spec.whatwg.org/#dom-node-ownerdocument
   late Document ownerDocument;
 
-  // The render object is inserted by Flutter framework when element is WidgetElement, so kraken need not manage render object when changed.
+  // Whether Kraken is needed to manage when render object.
   bool isManageRenderBoxBySelf = true;
 
   /// The Node.parentElement read-only property returns the DOM node's parent Element,
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index 65d358b263..c74d700a86 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -186,6 +186,7 @@ abstract class WidgetElement extends dom.Element {
 
   Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children);
 
+  // The render object is inserted by Flutter framework when element is WidgetElement.
   @override
   bool isManageRenderBoxBySelf = false;
 

From adef12cbc3da36b0780319ee1043f88a36ab5f95 Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Mon, 25 Apr 2022 19:34:32 +0800
Subject: [PATCH 20/21] :sparkles: feat: add RenderObjectManagerType.

---
 kraken/lib/src/dom/element.dart                      |  6 +++---
 kraken/lib/src/dom/node.dart                         | 11 ++++++++---
 kraken/lib/src/dom/text_node.dart                    |  2 +-
 kraken/lib/src/widget/widget_to_element_adaptor.dart |  2 +-
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/kraken/lib/src/dom/element.dart b/kraken/lib/src/dom/element.dart
index 5d31b1347c..312684a2e8 100644
--- a/kraken/lib/src/dom/element.dart
+++ b/kraken/lib/src/dom/element.dart
@@ -734,7 +734,7 @@ abstract class Element
 
     if (renderer != null) {
       // If element attach WidgetElement, render object should be attach to render tree when mount.
-      if (parent.isManageRenderBoxBySelf) {
+      if (parent.renderObjectManagerType == RenderObjectManagerType.KRAKEN_NODE) {
         RenderBoxModel.attachRenderBox(parent.renderer!, renderer!, after: after);
       }
 
@@ -796,7 +796,7 @@ abstract class Element
     RenderLayoutBox? renderLayoutBox = _renderLayoutBox;
     if (isRendererAttached) {
       // Only append child renderer when which is not attached.
-      if (!child.isRendererAttached && renderLayoutBox != null && isManageRenderBoxBySelf) {
+      if (!child.isRendererAttached && renderLayoutBox != null && renderObjectManagerType == RenderObjectManagerType.KRAKEN_NODE) {
         RenderBox? after;
         RenderLayoutBox? scrollingContentBox = renderLayoutBox.renderScrollingContent;
         if (scrollingContentBox != null) {
@@ -969,7 +969,7 @@ abstract class Element
     // Attach renderBoxModel to parent if change from `display: none` to other values.
     if (!isRendererAttached && parentElement != null && parentElement!.isRendererAttached) {
       // If element attach WidgetElement, render object should be attach to render tree when mount.
-      if (parentElement!.isManageRenderBoxBySelf) {
+      if (parentElement!.renderObjectManagerType == RenderObjectManagerType.KRAKEN_NODE) {
         RenderBoxModel _renderBoxModel = renderBoxModel!;
         // Find the renderBox of its containing block.
         RenderBox? containingBlockRenderBox = getContainingBlockRenderBox();
diff --git a/kraken/lib/src/dom/node.dart b/kraken/lib/src/dom/node.dart
index ca410da9a9..9470e7388e 100644
--- a/kraken/lib/src/dom/node.dart
+++ b/kraken/lib/src/dom/node.dart
@@ -16,6 +16,11 @@ enum NodeType {
   DOCUMENT_FRAGMENT_NODE,
 }
 
+enum RenderObjectManagerType {
+  FLUTTER_ELEMENT,
+  KRAKEN_NODE
+}
+
 /// [RenderObjectNode] provide the renderObject related abstract life cycle for
 /// [Node] or [Element]s, which wrap [RenderObject]s, which provide the actual
 /// rendering of the application.
@@ -88,9 +93,6 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
   // https://dom.spec.whatwg.org/#dom-node-ownerdocument
   late Document ownerDocument;
 
-  // Whether Kraken is needed to manage when render object.
-  bool isManageRenderBoxBySelf = true;
-
   /// The Node.parentElement read-only property returns the DOM node's parent Element,
   /// or null if the node either has no parent, or its parent isn't a DOM Element.
   Element? get parentElement {
@@ -307,6 +309,9 @@ abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCa
 
   @override
   EventTarget? get parentEventTarget => parentNode;
+
+  // Whether Kraken Node need to manage render object.
+  RenderObjectManagerType get renderObjectManagerType => RenderObjectManagerType.KRAKEN_NODE;
 }
 
 /// https://dom.spec.whatwg.org/#dom-node-nodetype
diff --git a/kraken/lib/src/dom/text_node.dart b/kraken/lib/src/dom/text_node.dart
index 9ce81ee19f..cc05dc4e80 100644
--- a/kraken/lib/src/dom/text_node.dart
+++ b/kraken/lib/src/dom/text_node.dart
@@ -81,7 +81,7 @@ class TextNode extends Node {
     createRenderer();
 
     // If element attach WidgetElement, render object should be attach to render tree when mount.
-    if (parent.isManageRenderBoxBySelf && parent.renderBoxModel is RenderLayoutBox) {
+    if (parent.renderObjectManagerType == RenderObjectManagerType.KRAKEN_NODE && parent.renderBoxModel is RenderLayoutBox) {
       RenderLayoutBox parentRenderLayoutBox = parent.renderBoxModel as RenderLayoutBox;
       parentRenderLayoutBox = parentRenderLayoutBox.renderScrollingContent ?? parentRenderLayoutBox;
       parentRenderLayoutBox.insert(_renderTextBox!, after: after);
diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index c74d700a86..a7a2817ede 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -188,7 +188,7 @@ abstract class WidgetElement extends dom.Element {
 
   // The render object is inserted by Flutter framework when element is WidgetElement.
   @override
-  bool isManageRenderBoxBySelf = false;
+  dom.RenderObjectManagerType get renderObjectManagerType => dom.RenderObjectManagerType.FLUTTER_ELEMENT;
 
   @override
   void didDetachRenderer() {

From d8ee1fbc76d0fafa19e3e7b24c8df945776c452d Mon Sep 17 00:00:00 2001
From: answershuto <answershuto@gmail.com>
Date: Tue, 26 Apr 2022 10:15:47 +0800
Subject: [PATCH 21/21] :art: chore: revert comment.

---
 kraken/lib/src/widget/widget_to_element_adaptor.dart | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kraken/lib/src/widget/widget_to_element_adaptor.dart b/kraken/lib/src/widget/widget_to_element_adaptor.dart
index a7a2817ede..908d825140 100644
--- a/kraken/lib/src/widget/widget_to_element_adaptor.dart
+++ b/kraken/lib/src/widget/widget_to_element_adaptor.dart
@@ -48,6 +48,7 @@ class KrakenRenderObjectToWidgetAdapter<T extends RenderObject> extends RenderOb
       assert(element != null);
     });
 
+    // If renderview is building,skip the buildScope phase.
     if (!needBuild) {
       if (element != null) {
         element?.mount(parentElement, null);