Bug - Add support for x-data on html tag (#1786)

* Add failing test

* Allow x-data on the html element

* Revert to failed scenario with different test

* Reapply fix

packages/alpinejs/src/lifecycle.js

@@ -20,8 +20,7 @@ export function start() {
         directives(el, attrs).forEach(handle => handle())
     })
 
-    let outNestedComponents = el => ! closestRoot(el.parentNode || closestRoot(el))
-
+    let outNestedComponents = el => ! closestRoot(el.parentElement)
     Array.from(document.querySelectorAll(allSelectors()))
         .filter(outNestedComponents)
         .forEach(el => {
@@ -46,6 +45,8 @@ export function addRootSelector(selectorCallback) { rootSelectorCallbacks.push(s
 export function addInitSelector(selectorCallback) { initSelectorCallbacks.push(selectorCallback) }
 
 export function closestRoot(el) {
+    if (!el) return
+
     if (rootSelectors().some(selector => el.matches(selector))) return el
 
     if (! el.parentElement) return

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

@@ -95,3 +95,17 @@ test('functions in x-data have access to proper this context',
         get('span').should(haveText('baz'))
     }
 )
+
+test('x-data works on the html tag',
+    [html`
+        <div>
+            <span x-text="'foo'"></span>
+        </div>
+    `,
+    `
+        document.querySelector('html').setAttribute('x-data', '')
+    `],
+    ({ get }) => {
+        get('span').should(haveText('foo'))
+    }
+)