<x-button> is a web component that wraps a <button>, for the purposes of illustrating how to design light DOM/attribute interactions.

This isn't necessarily how I would design a button web component in general. (In particular, I'm not sure wrapping a <button> is the best approach, at least for the specific API I'm presenting here.) So don't read too much into it. The important part is the interaction of the external API and the inner implementation.

The API is:

It adds the following functionality, hidden as implementation details:

View source to see the implementation.

A disabled x-button An x-button