Web components

Use in Ember.js

🏠 HOME

Web Components can be used in any web apps, including Ember.js!

Basics

Before adding a web component to an Ember component template you will need to import your Web Component in a javascript file of your project.

It can be imported before the Ember Controller or Component declaration.

// component.js

import Component from '@glimmer/component';
import { MyWebComponent } from 'overloop-web-components';

export default class MyEmberComponent extends Component {}

Then you will be able to add the web component tag to the Ember Component template

<!-- template.hbs -->

<my-web-component />

Data flow

Primitive data

Web components can receive primitive data from the Ember app through its properties

// component.js
export default class MyEmberComponent extends Component {
  name = 'John';
}

<!-- template.hbs -->

<my-web-component name="{{this.name}}" />

Complex objects

Web components are able to receive complex javascript objects from Ember but this can’t be done thought its properties.

<!-- template.hbs -->

<button @click={{this.sendDataToWebComponent}}>Send</button>
<my-web-component id="{{this.componentId}}" />

// component.js

import { guidFor } from '@ember/object/internals';

export default class MyEmberComponent extends Component {
  componentId = `my-web-component-${guidFor(this)}`;
 
  data = {
    firstname: 'John',
    lastname: 'Doe'
  };
  
  @action
  sendDataToWebComponent() {
    const myWebComponent = document.getElementById(this.componentId);
    myWebComponent.data = data;
  }  
}

Receiving data from a web component

Data can be received through events triggered by web components.

<!-- template.hbs -->

<my-web-component {{did-insert this.onWebComponentInsert}} />

// component.js

import { MyWebComponent } from 'overloop-web-components';

export default class MyEmberComponent extends Component {
  data = {
    firstname: 'John',
    lastname: 'Doe'
  };
  
  handleNewMessage(e) {
    console.log(e.detail);
  }
  
  @action
  onWebComponentInsert(myWebComponent) {
    myWebComponent.addEventListener('newMessage', this.handleNewMessage.bind(this));
  } 
}

// my-web-component.js

import { LitElement, html, css } from 'lit';

export default class MyWebComponent extends LitElement {
  sendMessage() {
    this.dispatchEvent(new CustomEvent('newMessage', {
      detail: 'Hello web component'
      bubbles: true
    }));
  }

  render() {
    return html`
      <button @click=${this.sendMessage}>Send</button>
    `;
  }
}

window.customElements.define('my-web-component', MyWebComponent);

<aside> <img src="/icons/playback-previous_lightgray.svg" alt="/icons/playback-previous_lightgray.svg" width="40px" /> Web components

</aside>

<aside> <img src="/icons/playback-next_lightgray.svg" alt="/icons/playback-next_lightgray.svg" width="40px" /> HTML and Templating

</aside>