02

This step provides a sample element with a template. Go ahead and try importing your directive, and then use it in a template.

import {timeAgo} from './time-ago.js';

Next, create a Date object at the module-level, above the TimeAgoExample class definition that we'll use to pass to the directive, just to see it working:

{% switchable-sample %}

const timeCreated = new Date();

@customElement('time-ago-example')
export class TimeAgoExample extends LitElement {
  ...

const timeCreated = new Date();

export class TimeAgoExample extends LitElement {
  ...

{% endswitchable-sample %}

And then call the directive from the template:

    return html`
      <p>This page was rendered ${timeAgo(timeCreated)}.</p>
    `;

You should see the directive output the Date as a string. The next step will format it as elapsed time instead.