Fixes #705 - Throw error when the root HTML element is a component and has a dynamic id attribute.

src/components/taglib/TransformHelper/handleRootNodes.js

@@ -266,6 +266,13 @@ module.exports = function handleRootNodes() {
     var nextKey = 0;
 
     rootNodes.forEach((curNode, i) => {
+        let id = curNode.getAttributeValue('id');
+
+        if (id && id.type !== 'Literal') {
+            context.addError('Root HTML element should not have a dynamic `id` attribute. See: https://github.com/marko-js/marko/wiki/Error:-Dynamic-root-HTML-element-id-attribute');
+            return;
+        }
+
         curNode.setFlag('hasComponentBind');
 
         if (!curNode.hasAttribute('key') && !curNode.hasAttribute('ref')) {

test/autotests/render/error-variable-id-root-node-component/template.marko

@@ -0,0 +1,5 @@
+class {}
+
+$ var id = 'abc123';
+
+<div id=id/>

test/autotests/render/error-variable-id-root-node-component/test.js

@@ -0,0 +1,6 @@
+var expect = require('chai').expect;
+
+exports.checkError = function(e) {
+    var message = e.toString();
+    expect(message).to.contain('https://github.com/marko-js/marko/wiki/Error:-Dynamic-root-HTML-element-id-attribute');
+};

test/autotests/render/variable-id-root-node/expected.html

@@ -0,0 +1 @@
+<div id="abc123"></div>

test/autotests/render/variable-id-root-node/template.marko

@@ -0,0 +1,3 @@
+$ var id = 'abc123';
+
+<div id=id/>

test/autotests/render/variable-id-root-node/test.js

@@ -0,0 +1 @@
+exports.templateData = {};