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.

Note

Global Attribute Support

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.

1<!-- If you do this -->
2<lightning-badge label="Alpha" icon-name="standard:event" title="Event"></lightning-badge>

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

1<!-- You get this in the DOM -->
2<lightning-badge title="Event" class="slds-badge">
3  <span class="slds-badge__icon slds-badge__icon_left">
4    <span class="slds-icon_container slds-current-color">
5      <!--Icon markup here -->
6    </span>
7  </span>Alpha
8</lightning-badge>

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.

1<!-- Do this instead -->
2<lightning-badge
3  label="Alpha"
4  icon-name="standard:event"
5  icon-alternative-text="Alpha Event"
6></lightning-badge>

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

1<!-- You get this in the DOM -->
2<lightning-badge class="slds-badge">
3  <span class="slds-badge__icon slds-badge__icon_left">
4    <span title="Alpha Event" class="slds-icon_container slds-current-color">
5      <!-- Icon markup here -->
6    </span>
7  </span>Alpha
8</lightning-badge>

To verify which attributes are supported, we recommend that you review the [specification](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-badge?type=Specifications 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.

Note

Pass a Class to a Base Component

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.

1<!-- If you do this -->
2<lightning-button
3  label="Submit"
4  onclick={handleClick}
5  class="slds-m-left_x-small other-custom-class"
6></lightning-button>

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.

1<!-- You get this in the DOM -->
2<lightning-button class="slds-m-left_x-small other-custom-class">
3  <button
4    type="button"
5    class="slds-button 
6        slds-button_neutral"
7  >
8    Submit
9  </button>
10</lightning-button>

Note

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

See Also