Difference between Element and DOM.Element

[danlourenco]

Hi there,

First off: thanks for the book. It's coming along great. I was wondering though if you could explain the difference (if any) between the following two approaches to inject the containing DOM element into the VM of a custom element:

I'm doing the following in my app:

import { inject, customElement } from 'aurelia-framework';

@customElement('nes-emulator')
@inject(Element)
export class Nes {

  constructor(element) {
    this.element = element;
  }

In your example, you do the following:

import {inject, DOM} from 'aurelia-framework';

@inject(DOM.Element)
export class ElementNameCustomElement {

     constructor(element) {
          this.element = element;
     }
}

Where is my 'Element' argument coming from? Is my approach out of date?

Cheers

[Vheissu]

Using straight up Element by itself is the same as DOM.Element. Using the DOM export is more for future purposes where Aurelia will run into multiple environments. When the server-side isomorphic stuff is added as well as Node.js support where globals do not exist, Aurelia will handle this for you. Element itself is a globally accessible object, if you open up your developer tools and type Element you'll see it outputs a constructor function.

I'll make sure this is all clarified in the book.

[danlourenco]

Thanks for the clarification!

[Vheissu]

This is in chapter 5.