XML

XML() returns a fresh xml tagged template with its own component registry, isolated from the global xml. Reach for it when you want a sandboxed surface — a docs site that exposes a curated set of tags, or an embed where you don't want the global xml registry to be polluted.

Use xml.define({ Name }) on the returned instance to register components by tag name. Registration must happen before the first template that references the name is compiled — once a template is compiled, its component-vs-element decisions are fixed.

Arguments

XML() takes no arguments.

Returns: an xml tagged-template function with extra members:

Member	Type	Description
xml	(template, ...values) => JSX.Element	The tagged template itself — call it as xml`...`.
xml.components	Record<string, JSX.ElementType>	The instance's registry, seeded with the built-in components.
xml.define	(components: Record<string, JSX.ElementType>) => void	Registers components addressable by tag name (case sensitive).

Examples

Isolated instance with registered components

Creates a local xml instance and registers a Card component on it, so <Card/> resolves to the component only within this instance.

import { render } from 'pota'
import { XML } from 'pota/xml'

const xml = XML()

xml.define({
	Card: props => xml`
		<section style="border:1px solid #ccc; padding:1rem">
			<h3>${props.title}</h3>
			${props.children}
		</section>
	`,
})

const App = xml`
	<div>
		<Card title="Hello">
			<p>this came from a registered component</p>
		</Card>
		<Card title="World">
			<p>and so did this</p>
		</Card>
	</div>
`

render(App)

Local component without touching the global registry

Defines a lowercase test tag on a file-local instance, leaving the global xml untouched.

import { render } from 'pota'
import { XML } from 'pota/xml'

const xml = XML()

xml.define({ test: () => 'hello world!' })

const App = xml`<div><test/> div contents</div>`

render(App)