import { LitElement, html, css } from 'lit-element';
import { FeatureA } from 'feature-a';
import { FeatureB } from 'feature-b';
import { ScopedElementsMixin } from '../../../../index.js'

export class PageA extends ScopedElementsMixin(LitElement) {
  static get scopedElements() {
    return {
      'feature-a': FeatureA,
      'feature-b': FeatureB,
    }
  }

  static get styles() {
    return css`
      :host {
        display: block;
        padding: 10px;
        border: 2px solid #ccc;
      }
    `;
  }

  render() {
    return html`
      <h3>I am page A</h3>
      <feature-a></feature-a>
      <feature-b></feature-b>
    `;
  }
}
