\n\n#### Lists\n\nLists are handled using the `Array.map()` method. In the podcast demo, we will use a map to list the episodes that are returned by the xml feed. Lists generally do not require a key, but in cases where the order of elements changes you can add a key using `html.for(key)`.\n\n
\n\n#### Conditional Rendering\n\nTernary operators are the recommended way to handle conditional rendering. The snippet below shows how elements can be conditionally rendered based on the available data.\n\n
\n\nIf you prefer a more HTML-like syntax, Ardi provides a `` element that you can use instead. To use it, just assign the `if` prop with a condition and nest your element inside. If you want to provide a fallback element, you can assign it to the `else` slot and it will be displayed if the condition is falsey. You can see this in action in the [Employee Card](/demos/employee) component.\n\n```js\nardi({\n template() {\n return html`\n \n \n \n \n `\n },\n})\n```\n\n#### Slots\n\nArdi components use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) by default, which means you can use [<slot>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement) tags to project nested elements into your templates. You can use a single default slot or multiple named slots.\n\nThe podcast demo has two named slots allowing the pagination button icons to be customized.\n\n
\n\n#### Refs\n\nArdi allows you to add ref attributes to elements in your template, which are accessible from `this.refs`.\n\nIn the podcast component, the `player` ref is used by the `togglePlayback` method to control playback.\n\n
\n\n### Methods\n\nYou can add any number of methods in your component and access them via `this`. Custom methods can be used in your template, in lifecycle callbacks, or inside of other methods. For examples, you can view the complete code for the [podcast demo](https://ardi.netlify.app/demos/demo). There are many more examples in components listed on the [demos page](https://ardi.netlify.app/demos).\n\n### Context\n\nArdi has a powerful and easy to use context api, allowing one component to share and synchronize its props or state with multiple child components. You can see this API in action in the [i18n demo](https://ardi.netlify.app/demos/i18n), this [CodePen example](https://codepen.io/jameslovallo/pen/poZaXqq?editors=0010), and in the CSS section below.\n\nTo share context from a parent component, add the `context` attribute with a descriptive name, i.e. `context=\"theme\"` You can then use `this.context(\"theme\")` to reference the element and access its props or state. When a child component uses the context to make changes to the parent element's props or state, the parent element will notify every other child component that accesses the same values, keeping the context synchronized throughout the application.\n\n```html\n\n```\n\n### Styles\n\nArdi components use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) by default. Elements in the Shadow DOM can access [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) declared on the page. Elements can also be styled using [part attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part).\n\n#### Inline CSS\n\nYou can use Javascript in an inline style attribute.\n\n
\n\n#### Styles Key\n\nIf you have a lot of CSS, it's cleaner to create a `styles` key. Ardi provides a `css` helper function to facilitate working with VSCode and other IDEs that support tagged template literals.\n\n
\n\n```js\nimport ardi, { css, html } from '//unpkg.com/ardi'\n\nardi({\n template() {\n const { bg, color } = this.context('theme')\n return html``\n },\n styles: css`\n nav {\n background: var(--bg);\n color: var(--color);\n }\n `,\n})\n```\n\n\n\n
\n\n#### Styles Function\n\nIf you prefer, you can also use Javascript variables and functions directly in your CSS by creating the `styles` key as a function.\n\n
\n\n#### CSS Pre-Processors\n\nArdi is a runtime framework, designed to work with any app, site, or platform. Since Sass and Less are build-time languages, no official support is provided. If you want to write styles in sass and use them in your components, you can always compile to native CSS and `@import` the file using Ardi's `styles` key.\n\nMany Sass features are redundant when using the Shadow DOM. Complex BEM selectors requiring `&` nesting are unnecessary because styles are scoped to the component, and CSS has native support for variables. Nesting is even coming soon. That being said, if cannot live without using SASS (or another pre-processor) for prototyping, here is [a demo](https://ardi.netlify.app/demos/sass) showing how you can.\n\n## Lifecycle\n\nArdi has several lifecycle callbacks, providing a convenient way to fetch data or apply effects.\n\n### created()\n\nThis callback runs as soon as the component is initialized. This is a good place to load data, setup observers, etc.\n\nA great example of this is in the [forecast demo](https://ardi.netlify.app/demos/forecast), where a resize observer is created to apply styles based on the component's rendered width (regardless of the viewport width).\n\n```js\nardi({\n tag: 'ardi-forecast',\n created() {\n new ResizeObserver(() =>\n requestAnimationFrame(\n () => (this.small = this.clientWidth <= this.breakpoint)\n )\n ).observe(this)\n },\n})\n```\n\n### ready()\n\nThis callback runs as soon as the component's template is rendered, allowing you to call methods that access refs defined in the template.\n\n### rendered()\n\nThis method runs each time the component renders an update. This was added to support event listeners when writing templates with Handlebars or untagged template literals, but you can use this method for any purpose.\n\n### changed()\n\nAlthough props are reactive, meaning the template is automatically updated when a prop's value changes, you may encounter scenarios where you need to handle a property's value manually, i.e. to fetch data or apply an effect. You can use this callback to observe and respond to prop updates.\n\nHere is an example from the [forecast demo](https://ardi.netlify.app/demos/forecast).\n\n```js\nardi({\n tag: 'ardi-forecast',\n changed(prop) {\n if (\n prop.old &&\n prop.new &&\n ['lat', 'lon', 'locale', 'unit'].includes(prop.name)\n ) {\n this.fetchForecast()\n }\n },\n})\n```\n\n### intersected()\n\nThis method is called when the component is scrolled into view. You can use the ratio parameter to determine how much of the component should be visible before you apply an effect. Ardi will only create the intersection observer if you include this method, so omit it if you do not intend to use it.\n\nIn the [forecast demo](https://ardi.netlify.app/demos/forecast), the intersect method is used to lazy-load data once the component is scrolled into view. This trick can save a lot of money if you use paid APIs!\n\n```js\nardi({\n tag: 'ardi-forecast',\n intersected(r) {\n if (!this.gotWeather && r > 0.2) {\n this.fetchForecast()\n }\n },\n})\n```\n\n## Template Options\n\nμhtml is tiny, fast and efficient, and we strongly recommend it. However, JSX is king right now, and Handlebars is still holding on strong. That's why Ardi allows you to use whatever template library you prefer. Sample code for each supported option is provided below, for comparison. There is also an interactive [CodePen demo](https://codepen.io/jameslovallo/pen/WNKpqMj?editors=0010) showing all three examples.\n\n### μhtml\n\n\n```js\nimport ardi, { html } from '//unpkg.com/ardi'\n\nardi({\n tag: 'uhtml-counter',\n state: () => ({ count: 0 }),\n template() {\n return html`\n `\n },\n})\n```\n\n### JSX-Dom\n\n\n```js\nimport ardi, { html } from '//unpkg.com/ardi'\nimport React from '//cdn.skypack.dev/jsx-dom'\n\nardi({\n tag: 'jsx-counter',\n state: () => ({ count: 0 }),\n template() {\n return (\n \n )\n },\n})\n```\n\n### Handlebars\n\nWith Handlebars (or any template that returns a simple string: i.e. an untagged template literal), event listeners can be added to the `rendered` method. If present, the `rendered` method will run after each render.\n\n
` : ''}\n