From 8135c978f4c895a4322b8a1e428988008945458b Mon Sep 17 00:00:00 2001
From: Michael Geers <michael.geers@neuland-bfi.de>
Date: Tue, 2 Oct 2018 08:54:19 +0200
Subject: [PATCH] hydration: leave inner markup created by custom elements
 untouched

---
 src/index.js           | 11 ++++++----
 test/recycling.test.js | 49 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 33cdfc95c..66fa97439 100644
--- a/src/index.js
+++ b/src/index.js
@@ -385,11 +385,14 @@ export function app(state, actions, view, container) {
         }
       }
 
-      while (i < oldChildren.length) {
-        if (getKey(oldChildren[i]) == null) {
-          removeElement(element, oldElements[i], oldChildren[i])
+      var isCustomElement = element.nodeName.indexOf("-") !== -1
+      if (!isRecycling && !isCustomElement) {
+        while (i < oldChildren.length) {
+          if (getKey(oldChildren[i]) == null) {
+            removeElement(element, oldElements[i], oldChildren[i])
+          }
+          i++
         }
-        i++
       }
 
       for (var i in oldKeyed) {
diff --git a/test/recycling.test.js b/test/recycling.test.js
index ef725a247..3cc464c37 100644
--- a/test/recycling.test.js
+++ b/test/recycling.test.js
@@ -50,3 +50,52 @@ test("recycle markup against keyed vdom", done => {
     document.getElementById("app")
   )
 })
+
+test("recycle custom-elements inner markup to support non-native shadowdom polyfills", done => {
+  const SSR_HTML = `<div id="app"><main><custom-element>fake shadowdom</custom-element></main></div>`
+
+  document.body.innerHTML = SSR_HTML
+
+  app(
+    null,
+    null,
+    state => (
+      <main>
+        <custom-element
+          oncreate={element => {
+            expect(element.innerHTML).toBe("fake shadowdom")
+            expect(document.body.innerHTML).toBe(SSR_HTML)
+            done()
+          }}
+        />
+      </main>
+    ),
+    document.getElementById("app")
+  )
+})
+
+test("hydrate custom elements children defined in the view", done => {
+  const SSR_HTML = `<div id="app"><main><custom-element><hr id="foo"></custom-element></main></div>`
+
+  document.body.innerHTML = SSR_HTML
+
+  app(
+    null,
+    null,
+    state => (
+      <main>
+        <custom-element>
+          <hr
+            id="foo"
+            oncreate={element => {
+              expect(element.id).toBe("foo")
+              expect(document.body.innerHTML).toBe(SSR_HTML)
+              done()
+            }}
+          />
+        </custom-element>
+      </main>
+    ),
+    document.getElementById("app")
+  )
+})