# Recommendations `` is a web component that fetches ranked article recommendations for the current reader via [`allegro.recommendations`](/developer/guides/recommendations.md) and renders them as a "Read Next" or "More Like This" list, reporting clicks automatically. The common case needs no JavaScript from the publisher — just place the tag. When no recommendations are available — no engine configured for the tenant, the engine unreachable, or the SDK call fails — the component renders nothing at all rather than an empty container. ## Usage[​](#usage "Direct link to Usage") ```html ``` With custom attributes: ```html ``` ## Attributes[​](#attributes "Direct link to Attributes") | Attribute | Type | Default | Description | | ------------------ | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------- | | `limit` | `number` | *(empty)* | How many articles to request. Defaults to 6 upstream; 24 is the maximum. | | `max-age-days` | `number` | *(empty)* | Excludes articles published more than this many days ago. Defaults to no cap. | | `path` | `text` | *(empty)* | Article to anchor the recommendations on. Defaults to the current page path. | | `heading` | `text` | *(empty)* | Heading shown above the list. When omitted, no heading is rendered. | | `layout` | `select` | `list` | Layout for the rendered items: `list` or `grid`. | | `show-placeholder` | `boolean` | `true` | Whether to reserve space with placeholder rows while loading. Set to `false` to render nothing until the items arrive. | | `tracking-data` | `text` | *(empty)* | JSON object of custom data merged into every tracked event, e.g. `"{'campaign': 'sidebar'}"`. | ## Loading Placeholder[​](#loading-placeholder "Direct link to Loading Placeholder") While the request is in flight the component renders a grid of gray placeholder rows matching the requested `limit` and `layout`, and carries `aria-busy="true"` until the request settles. This reserves the space the items will occupy so the surrounding page does not shift when they arrive. ```html ``` Set `show-placeholder="false"` for placements where an empty gap is preferable to a visible skeleton — a sidebar that should collapse when the engine returns nothing, for instance. The component then stays empty until the items render. ## Click Attribution[​](#click-attribution "Direct link to Click Attribution") Each rendered item's link click calls [`allegro.recommendations.trackClick(item)`](/developer/guides/recommendations.md#click-attribution) with the exact item object the component rendered from, so attribution is resolved by identity rather than by path matching. ## Shadow Parts[​](#shadow-parts "Direct link to Shadow Parts") For styling beyond what the CSS variables make available, elements can be targeted directly with the CSS [`::part()`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) selector. ```css allegro-recommendations::part(item-title) { text-transform: uppercase; } ``` | Part | Description | | ------------ | --------------------------------------------------- | | `wrapper` | Wrapper around the heading and item list. | | `heading` | The heading element, when `heading` is set. | | `items` | The `