Fix GlimmerComponent not having this.element set

packages/ember-htmlbars/lib/node-managers/component-node-manager.js

@@ -234,7 +234,21 @@ ComponentNodeManager.prototype.render = function(_env, visitor) {
       this.block(env, [], undefined, this.renderNode, this.scope, visitor);
     }
 
-    var element = this.expectElement && this.renderNode.firstNode;
+    let element;
+    if (this.expectElement || component.isGlimmerComponent) {
+      // This code assumes that Glimmer components are never fragments. When
+      // Glimmer components gain fragment powers, we will need to communicate
+      // whether the layout produced a single top-level node or fragment
+      // somehow (either via static information on the template/component, or
+      // dynamically as the layout is being rendered).
+      element = this.renderNode.firstNode;
+
+      // Glimmer components may have whitespace or boundary nodes around the
+      // top-level element.
+      if (element && element.nodeType !== 1) {
+        element = element.nextElementSibling;
+      }
+    }
 
     handleLegacyRender(component, element);
     env.renderer.didCreateElement(component, element);

packages/ember-htmlbars/tests/integration/component_invocation_test.js

@@ -1223,6 +1223,40 @@ if (isEnabled('ember-htmlbars-component-generation')) {
     equal(view.$().text(), 'stuff');
   });
 
+  QUnit.test('non-block replaced with a div should have correct `element`', function() {
+    registry.register('template:components/non-block', compile('<div />'));
+
+    let component;
+
+    registry.register('component:non-block', GlimmerComponent.extend({
+      init() {
+        this._super(...arguments);
+        component = this;
+      }
+    }));
+
+    view = appendViewFor('<non-block />');
+
+    equal(component.element, view.$('div')[0]);
+  });
+
+  QUnit.test('non-block replaced with identity element should have correct `element`', function() {
+    registry.register('template:components/non-block', compile('<non-block />'));
+
+    let component;
+
+    registry.register('component:non-block', GlimmerComponent.extend({
+      init() {
+        this._super(...arguments);
+        component = this;
+      }
+    }));
+
+    view = appendViewFor('<non-block />');
+
+    equal(component.element, view.$('non-block')[0]);
+  });
+
   QUnit.test('non-block replaced with a div should have inner attributes', function() {
     registry.register('template:components/non-block', compile('<div data-static="static" data-dynamic="{{internal}}" />'));