First, some instances of a plain-button base class. 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. The component exposes a "disabled" attribute which controls whether the button is enabled or not.

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. All members of the base class' API are inherited, including plain-button's "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