Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
Supported HTML Tags
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

HTML in Components

An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into an <aura:html> component, allowing it to enjoy the same rights and privileges as any other component.

For example, the framework automatically converts a standard HTML <div> tag to this component:

1<aura:html tag="div" />

You can add HTML markup in components. Note that you must use strict XHTML. For example, use <br/> instead of <br>. You can also use HTML attributes and DOM events, such as onclick.

Some tags, like <applet> and <font>, aren’t supported.

Warning

Unescaping HTML

To output pre-formatted HTML, use aura:unescapedHTML. For example, this is useful if you want to display HTML that is generated on the server and add it to the DOM. You must escape any HTML if necessary or your app might be exposed to security vulnerabilities.

You can pass in values from an expression, such as in <aura:unescapedHtml value="{!v.note.body}"/>.

{!expression} is the framework's expression syntax. For more information, see Using Expressions.