💡 What is this?

I created this repository to learn the fundamentals of Web Components.

📖 Resources

MDN Web Components Documentation:

• Web Components Overview
• Using Custom Elements
• Using Shadow DOM
• Using Templates and Slots

Additional Resources:

• Web Components on web.dev
• Custom Element Best Practices on web.dev

🔍 Examples

This section features a list of examples of how each Web Component implemented in this repository can be used, and the result it produces.

Textual throbber

This element consists of a full-screen throbber (loading icon) accompanied by a changing message.

The following snippet shows how it would be used:

<textual-throbber loading="true">
	<throbber-message>Summoning mystical unicorns...</throbber-message>
	<throbber-message>Brewing magical coffee...</throbber-message>
	<throbber-message>Teaching robots to dance...</throbber-message>
	<throbber-message>Convincing pixels to behave...</throbber-message>
	<throbber-message>Untangling virtual spaghetti...</throbber-message>
</textual-throbber>

• The loading attribute must be dynamically updated.
• The messages displayed by this element must be passed uing a throbber-message element.
  • Empty throbber-messages are ignored.
  • Messages are displayed in the order in which they are passed.

A live example can be found here.