fix(hydrate): fix hydrating style elements

Author: adamdbradley

src/runtime/client-hydrate.ts

@@ -214,6 +214,12 @@ const clientHydrate = (
         }
       }
     }
+  } else if (parentVNode && parentVNode.$tag$ === 'style') {
+    parentVNode.$children$ = [{
+      $index$: '0',
+      $text$: node.textContent,
+      $elm$: node
+    } as any];
   }
 };
 

src/runtime/test/hydrate-style-element.spec.tsx

@@ -0,0 +1,43 @@
+import { Component, h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+
+describe('hydrate style element', () => {
+
+  it('style element text', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+
+      render() {
+        return (
+          (h as any)('style', null, 'div { color: red; }')
+        );
+      }
+    }
+    const serverHydrated = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`,
+      hydrateServerSide: true
+    });
+    expect(serverHydrated.root).toEqualHtml(`
+      <cmp-a s-id="1">
+        <!--r.1-->
+        <style c-id="1.0.0.0">div { color: red; }</style>
+      </cmp-a>
+    `);
+
+    const clientHydrated = await newSpecPage({
+      components: [CmpA],
+      html: serverHydrated.root.outerHTML,
+      hydrateClientSide: true
+    });
+
+    expect(clientHydrated.root).toEqualHtml(`
+      <cmp-a>
+        <!--r.1-->
+        <style>div { color: red; }</style>
+      </cmp-a>
+    `);
+  });
+
+});

src/runtime/vdom/vdom-annotations.ts

@@ -113,10 +113,13 @@ const insertChildVNodeAnnotations = (doc: Document, vnodeChild: d.VNode, cmpData
     childElm.setAttribute(HYDRATE_CHILD_ID, childId);
 
   } else if (childElm.nodeType === NODE_TYPE.TextNode) {
-    const textNodeId = `${TEXT_NODE_ID}.${childId}`;
+    const parentNode = childElm.parentNode;
+    if (parentNode.nodeName !== 'STYLE') {
+      const textNodeId = `${TEXT_NODE_ID}.${childId}`;
 
-    const commentBeforeTextNode = doc.createComment(textNodeId);
-    childElm.parentNode.insertBefore(commentBeforeTextNode, childElm);
+      const commentBeforeTextNode = doc.createComment(textNodeId);
+      parentNode.insertBefore(commentBeforeTextNode, childElm);
+    }
 
   } else if (childElm.nodeType === NODE_TYPE.CommentNode) {
     if (childElm['s-sr']) {