Use a Base Component with Global Attributes

As base components use many of the visual elements that come with HTML, they can use the global attributes that are common to HTML elements.

While global attributes are common to all HTML elements, they may have no effect on some elements. Similarly, some global attributes have no effect on or don't apply to a base component.

Some global attributes have no effect on or don't apply to a base component. For example, the lightning-button Specification tab lists out several global attributes - name, type, value - that are consistent with the <button> HTML element. However, global attributes such as autofocus aren't supported on lightning-button as they don't get passed down to the <button> element in the base component.

Base components can use a global attribute and surface it as a public property under a different attribute name. This technique is often used if the base component is made up of several HTML elements that use the same attribute values.

Let's take a look at the lightning-badge base component, which composes multiple <span> elements and an <svg> element for icon support. Based on its internal logic, lightning-badge can display text without an icon or text with an icon. So you may expect that the title global attribute for hover text applies to the icon.

However, if you apply title on lightning-badge, it applies only to the lightning-badge wrapper element, and not on the icon.

In this case, lightning-badge surfaces an icon-alternative-text attribute and passes it down to the title attribute internally. So you use the icon-alternative-text attribute to get hover text on lightning-badge.

Using the icon-alternative-text attribute passes down the value to the title attribute for the icon.

To verify which attributes are supported, we recommend that you review the specification and the reference documentation of the base component you're working with.

You can see how a base component renders in the DOM to understand its expected behavior. But don’t rely on any internal markup or CSS classes of a base component because they can change in future releases.

Passing in a custom class or an SLDS utility class using the class attribute applies the class to the wrapper element on the base component.

While the internal elements of the base component maintains its SLDS classes, the classes you added via the class attribute are appended to the outer lightning-button element.

You can see how a base component renders in the DOM to understand its expected behavior. But don’t rely on any internal markup or CSS classes of a base component because they can change in future releases.

To understand which attributes are supported, including ARIA attributes for accessibility support, review the base component's reference documentation.

See Also