webc/no-customized-builtins

Why

A customized built-in (customElements.define('fancy-button', FancyButton, { extends: 'button' }) used as <button is="fancy-button">) is not supported in Safari, and its maker has said it does not plan to add it. On every iPhone and Mac with Safari the element stays a plain button: the behaviour you added is silently missing.

Fix

Define an autonomous element (<fancy-button>) and put a real <button> inside its shadow root, or keep the native element and add the behaviour with a small script or a framework directive. If you depend on is=, load a polyfill and test in Safari.

Examples

// bad
customElements.define('fancy-button', FancyButton, { extends: 'button' })
// good
customElements.define('fancy-button', FancyButton) // renders <button> in its shadow root

Sources

• MDN, Using custom elements (types of custom element)
• MDN, the is global attribute

Read it in the terminal

npx github:dawidolko/frontend-skills explain webc/no-customized-builtins