First, some instances of a plain-button base class, which subclasses the standard HTML button element. The base class sets some host styles (font family, size, and weight), and applies styles to the contained button. It also defines a click handler on the button: when clicked, the button will display a console message.

Plain button Disabled plain button

Next, we have some instances of a component called icon-button which subclasses plain-button. Programatically, an icon-button will pass an "instanceof" test when asked if it is an instance of plain-button or HTMLButtonElement. All members of the base class' API are inherited, including the standard "disabled" attribute. Styling is also inherited, and the subclass can even override styling from the base class (now the font weight is bold). It adds an icon to the template and, critically, the icon will appear inside the button defined by the base class' template. Finally, the subclass overrides the base's class method so that a different message is displayed in the console when the button is clicked.

Icon button Disabled icon button

Extending a standard HTML element like this currently only works with native web components; it does not work with the Shadow DOM polyfill.