Class WidgetElement<T>

Custom Element that helps you to create widgets.

Define a widget

import {WidgetElement} from '@rambler-tech/widget-element'
import {createApp} from './app'

export class CustomWidget extends WidgetElement {
  static observedAttributes = ['app-id']

  async initialize(shadowRoot: ShadowRoot) {
    const {appId} = this
    this.app = createApp(shadowRoot)
    await this.app.render({appId})
  }

  attributeChanged() {
    const {appId} = this
    this.app.render({appId})
  }

  destroy() {
    this.app.destroy()
  }
}

CustomWidget.register('custom-widget')
Copy

Use a widget as element

<custom-widget app-id="1234"></custom-widget>
<script type="module">
  import './components/custom-widget'

  const widget = document.querySelector('custom-widget')
  widget.addEventListener('ready', () => {
    // Widget is ready
  })
</script>
Copy

Or

<script type="module">
  import './components/custom-widget'

  const widget = document.createElement('custom-widget')
  widget.appId = '1234'
  widget.addEventListener('ready', () => {
    // Widget is ready
  })
</script>
Copy

Or use a widget as constructor

<script type="module">
  import {WidgetElement} from './components/custom-widget'

  const widget = new CustomWidget({appId: '1234'})
  widget.addEventListener('ready', () => {
    // Widget is ready
  })
</script>
Copy