Adding Custom Attributes To Your Component


placeholder

This is a premium lesson.

Subscribe to get access to the entire course.

Sign up now

Most HTML elements allow developers to pass down data via attributes. You’ve likely seen examples of this with buttons, inputs, or anchor tags. So it makes sense that we provide a similar mechanism for consumers to pass data down to our components.

If we were to distribute the copyright element, we wouldn’t want to hardcode data like the company name. That would be impractical since no other company in the world is called Component Odyssey.

Instead, we want to provide a way for consumers to pass through a name via an attribute on the copyright element. Here’s what this would look like:

<odyssey-copyright name="Component Odyssey"></odyssey-copyright>

Here’s the behaviour in action:

Dynamically changing the content by passing down attr