Merge pull request #988 from markfirmware/template-roots-error-message

corrected template roots error message

README.md

@@ -471,7 +471,7 @@ For cases where `x-show` isn't sufficient (`x-show` sets an element to `display:
 
 It's important that `x-if` is used on a `<template></template>` tag because Alpine doesn't use a virtual DOM. This implementation allows Alpine to stay rugged and use the real DOM to work its magic.
 
-> Note: `x-if` must have a single element root inside the `<template></template>` tag.
+> Note: `x-if` must have a single root element inside the `<template></template>` tag.
 
 > Note: When using `template` in a `svg` tag, you need to add a [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) that should be run before Alpine.js is initialized.
 
@@ -512,7 +512,7 @@ If you want to access the array object (collection) of the iteration, use the fo
 </template>
 ```
 
-> Note: `x-for` must have a single element root inside of the `<template></template>` tag.
+> Note: `x-for` must have a single root element inside of the `<template></template>` tag.
 
 > Note: When using `template` in a `svg` tag, you need to add a [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) that should be run before Alpine.js is initialized.
 

src/utils.js

@@ -28,7 +28,7 @@ export function warnIfMalformedTemplate(el, directive) {
     if (el.tagName.toLowerCase() !== 'template') {
         console.warn(`Alpine: [${directive}] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#${directive}`)
     } else if (el.content.childElementCount !== 1) {
-        console.warn(`Alpine: <template> tag with [${directive}] encountered with multiple element roots. Make sure <template> only has a single child element.`)
+        console.warn(`Alpine: <template> tag with [${directive}] encountered with an unexpected number of root elements. Make sure <template> has a single root element. `)
     }
 }