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')

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>

Or

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

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

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>

Type Parameters

  • T = any

Hierarchy

  • HTMLElement
    • WidgetElement

Constructors

  • Widget custom element constructor

    Type Parameters

    • T = any

    Parameters

    • Optional properties: NonFunctionProperties<T>

    Returns WidgetElement<T>

Accessors

  • get fallback(): string
  • Get fallback (slot element by default)

    class CustomWidget extends WidgetElement {
    get fallback() {
    return `<span class="${styles.loader}">Loading...</span>`
    }
    }

    Returns string

Methods

  • An attribute of widget is changed

    Returns void

  • Widget is destroyed

    Returns void

  • Dispatch event

    Parameters

    • eventType: string
    • Optional options: CustomEventInit<any>

    Returns void

  • Dispatch error

    Parameters

    • error: Error
    • Optional options: ErrorEventInit

    Returns void

  • Hide fallback (slot element by default)

    Returns void

  • Widget is initialized, and shadow root is attached

    Parameters

    • _shadowRoot: ShadowRoot

    Returns void

  • Show fallback (slot element by default)

    Returns void

  • Register a widget custom element

    Parameters

    • tagName: string

    Returns void

Generated using TypeDoc