X-html in x-for (#2766)

* Add failing test

* Move initTree outside of mutateDom when creating new elements as part of x-for

* Use mutateDom and initTree in x-html to ensure it initialises correctly when the mutation observer is not running (i.e. x-for)

packages/alpinejs/src/directives/x-html.js

@@ -1,11 +1,19 @@
 import { directive } from '../directives'
+import { initTree } from '../lifecycle'
+import { mutateDom } from '../mutation'
 
 directive('html', (el, { expression }, { effect, evaluateLater }) => {
     let evaluate = evaluateLater(expression)
 
     effect(() => {
         evaluate(value => {
-            el.innerHTML = value
+            mutateDom(() => {
+                el.innerHTML = value
+
+                el._x_ignoreSelf = true
+                initTree(el)
+                delete el._x_ignoreSelf
+            })
         })
     })
 })

tests/cypress/integration/directives/x-for.spec.js

@@ -545,3 +545,17 @@ test('x-for removed dom node does not evaluate child expressions after being rem
         get('span').should('not.exist')
     }
 )
+
+test('renders children using directives injected by x-html correctly',
+    html`
+        <div x-data="{foo: 'bar'}">
+            <template x-for="i in 2">
+                <p x-html="'<span x-text=&quot;foo&quot;></span>'"></p>
+            </template>
+        </div>
+    `,
+    ({ get }) => {
+        get('p:nth-of-type(1) span').should(haveText('bar'))
+        get('p:nth-of-type(2) span').should(haveText('bar'))
+    }
+)