I have a tagless ponent in Ember and want to have the innerHtml (this.element) on a lifecycle hook (for example the didRender). When I use this.element the value is always null. When I add a tagname to the ponent (tagName: 'div') I have the innerHtml of the ponent with this.element, but can I get the innerHtml without setting the tagName?

I have a tagless ponent in Ember and want to have the innerHtml (this.element) on a lifecycle hook (for example the didRender). When I use this.element the value is always null. When I add a tagname to the ponent (tagName: 'div') I have the innerHtml of the ponent with this.element, but can I get the innerHtml without setting the tagName?

• javascript
• ember.js
• ponents

Share Improve this question Follow asked May 1, 2018 at 6:17 MarioMario 66077 silver badges1919 bronze badges 1

• I’m not sure, but I think that’s the price of tagless ponents. Why do you need to have a tagless ponent? Maybe there’s another way you can acplish the same goal – handlebears Commented May 1, 2018 at 18:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

this.element does not give you innerHTML, it gives you a real HTML Element. A tagless ponent, by definition, doesn't have any Element of its own. So this.element is necessarily null.

The biggest reason we haven't added an equivalent property for retrieving a Range (which is what you'd need to represent a tagless ponent's area of the DOM) is that unlike this.element, the Range could change through the lifetime of the ponent. Making it fully observable would be expensive, and leaving it not-observable would make it really easy to create bugs.

Most of the mon use cases are covered by what Gaurav suggested: explicitly labeling the elements you really want to find and accessing them via querySelector or querySelectorAll.

If you're doing something really fancy, and you understand that it's only a snapshot that can go stale, the escape hatch is Ember.ViewUtils.getViewBounds. It's not marked public, but it is depended on by official projects like Ember Inspector, so we absolutely would not break it without warning. Like any heavily-used non-public API, we would issue a deprecation warning and wait a full LTS cycle.

In the case of Ember.ViewUtils.getViewBounds, a strong case can be made for just marking it public, and if somebody writes an RFC to that effect I think we can get consensus on that.

Yes, this is broken. See https://github./emberjs/ember.js/issues/13627 for more details.

A workaround has been posted here: https://github./emberjs/rfcs/issues/168 However, it uses private apis and may break in future versions without warning.

My remendation is to either use an element via tagName so this.element exists, or to place a class on the ponent's parent element so that you can use document.querySelector('.class-name').innerHTML -- but this requires that the parent element be known.