Change Morph plugin to use createElement(template).content rather tha…

…n createRange().createContextualFragment() as the later does not support table <tr> or <td> tags (#3020)

packages/morph/src/dom.js

@@ -57,7 +57,9 @@ export function dom(el) {
 }
 
 export function createElement(html) {
-    return document.createRange().createContextualFragment(html).firstElementChild
+    const template = document.createElement('template')
+    template.innerHTML = html
+    return template.content.firstElementChild
 }
 
 export function textOrComment(el) {

tests/cypress/integration/plugins/morph.spec.js

@@ -342,3 +342,16 @@ test('can morph multiple nodes',
         get('p:nth-of-type(2)').should(haveText('2'))
     },
 )
+
+test('can morph table tr',
+    [html`
+        <table>
+            <tr><td>1</td></tr>
+        </table>
+    `],
+    ({ get }, reload, window, document) => {
+        let tr = document.querySelector('tr')
+        window.Alpine.morph(tr, '<tr><td>2</td></tr>')
+        get('td').should(haveText('2'))
+    },
+)