A `lightning-tab` keeps related content in a single container. The tab content
displays when a user clicks the tab. `lightning-tab` is intended to be used
with `lightning-tabset`.

This component inherits styling from
[tabs](https://www.lightningdesignsystem.com/components/tabs/) in the
Lightning Design System.

#### Usage Considerations

Tab content is lazy loaded, and as such only the active and previously active tabs content is queryable.

See [`lightning-tabset`](bundle/lightning-tabset/documentation) for more
information.

You can nest `lightning-tab` within other elements such as `<div>` or `<template>`, for example to render tabs conditionally using `if:true` and `if:false`. Otherwise, you must nest
`lightning-tab` directly within `lightning-tabset` tags.

For example, you want to display a tab conditionally.

```html
<lightning-tabset>
    <lightning-tab label="Item One">
        Content for tab 1
    </lightning-tab>
    <template if:true={showTabTwo}>
        <lightning-tab label="Item Two">
            Content for tab 2
        </lightning-tab>
    </template>
</lightning-tabset>
```

The `label` attribute supports text only. To include an icon before the label in a tab, use the `iconName` attribute.  Provide alternative text for the icon using `iconAssistiveText`. To include an icon after the label, use the `endIconName` attribute.  Provide alternative text for that icon using `endIconAlternativeText`. Set `showErrorIndicator` to `true` to display an error indicator in the tab.

This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
