ssr/hydration: keep markup created by custom elements in the dom

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) {

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")
+  )
+})