<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:

• Its content is controlled by the consumer
• The consumer can set the disabled="" attribute

It adds the following functionality, hidden as implementation details:

• Decorates the consumer's content with text on either side (so if the consumer gives you "Foo" the button ends up with "!! Foo !!" displayed).
• The button always has a tooltip (title="") of "???".

View source to see the implementation.