Polyfills

Webuum builds on modern web APIs — some of which are still experimental or not universally supported.

To keep the runtime small, polyfills are opt-in and can be lazy-loaded based on feature detection.

Command API

Webuum supports the Invoker Commands API which introduces a native way to declaratively bind element actions (including custom actions) using a command attribute — without custom event listeners or JavaScript wiring.

<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

This is already supported in Chrome, Firefox and Safari Technology Preview — full support is near.

To support all browsers today, you can use invokers-polyfill.

npm install invokers-polyfill

Then lazy-load it when needed using Webuum’s built-in feature detection:

import { supportsCommand } from 'webuum/supports'

if (!supportsCommand) {
    const { apply } = await import('invokers-polyfill/fn')
    apply()
}

For a deeper explanation of how the Commands API works and how to use it in Webuum, see the Command page.

Customized Built-in Elements

Customized built-ins allow you to extend native HTML elements like <dialog>, <form> or <button> using JavaScript — for example, to add behavior without wrapping them in extra markup.

customElements.define('x-dialog', class extends HTMLDialogElement {
    connectedCallback() {
        this.addEventListener('close', () => console.log('Closed'))
    }
}, { extends: 'dialog' })

This lets you enhance native features without breaking semantics or accessibility. It’s ideal when you want to extend something like <dialog> instead of recreating it from scratch.

Unfortunately, Safari does not support this feature and has explicitly declined to implement it.

To ensure compatibility, you can use @webreflection/custom-elements-builtin.

npm install invokers-polyfill

Then lazy-load it when needed using Webuum’s built-in feature detection:

import { supportsIs } from 'webuum/supports'

if (!supportsIs()) {
    await import('@webreflection/custom-elements-builtin')
}

This loads a lightweight polyfill only when needed — so you can safely use customized built-ins and still ship minimal JavaScript.

For a deeper dive into how customized built-ins work and when to use them, check out the Element page.