The HTML is attribute
The HTML is attribute lets a standard element act as a customized built-in element defined with the Custom Elements API, for example <button is="fancy-button">. It is a global attribute. Note: Safari does not implement customized built-ins, so support is not universal.
Overview
Web components come in two flavors: autonomous custom elements (a brand-new tag like <my-widget>) and customized built-in elements, which extend an existing element. The is attribute powers the second kind: you register a class that extends, say, HTMLButtonElement, then write <button is="fancy-button"> to get a real button with your extra behavior.
Because the element is still a native <button>, it keeps built-in semantics and accessibility for free. The catch is support: WebKit/Safari has declined to implement customized built-ins, so you often need a polyfill or an autonomous element instead.
Values
| Value |
|---|
| The tag name of a registered customized built-in element. |
Example
<!-- Requires customElements.define('fancy-button', class extends HTMLButtonElement {…}, {extends:'button'}) -->
<button is="fancy-button">Enhanced button</button>Best practices
- Use it to extend a native element while keeping its built-in behavior and accessibility.
- Register the customized built-in with
customElements.defineand theextendsoption. - Check browser support — customized built-ins are not supported everywhere.
- Prefer autonomous custom elements where broad support matters.