Access HTML element from Glimmer component without modifier

Question

is it possible to access component's HTML element in Glimmer components without the use of did-insert helper? Something as simple as this.element or this.elementId in non-glimmer elements.

I've created a class that extends Component that all my components will be extending. After my "special" component is created I want to manipulate with its DOM.

Answer 1

No. Glimmer Components introduced as part of Ember Octane does not provide direct access to DOM. Instead modifiers were introduced for features that require DOM manipulation.

Modifiers provide access to the element on which they are used and are meant to manipulate the DOM. This provides a better reuse as they can be used in any template and aren't coupled with a specific component.

Your "special" component might be better implemented as a modifier.

{{did-insert}} is very likely not a helper but a modifier provided by @ember/render-modifiers package. For most cases it's better to implement a custom modifier than using generic modifiers like {{did-insert}} . These modifiers are a great transition helper to refactor existing code but still coupling the element modification to a specific class.

ember-modifier package provides a nice API to implement modifiers either with a functional or a class-based approach. You don't need to care about the low-level APIs provided by modifier manager .