dp-content

Renders user-supplied text as safe rich content: emoji shortcodes, GitHub-flavored markdown,
DOMPurify sanitisation, then media embeds (images, video, YouTube), mentions, and
autolinks. It exposes the shared contentRenderer engine (static/js/ContentRenderer.js),
the same pipeline used by the site's data-render attribute, as a custom element.

Source: static/js/components/AppContent.js.

Behaviour

On connection the element reads its own text, renders it once, and replaces its contents with
the sanitised HTML; code blocks are highlighted.
Sanitisation is fail-closed: rendering throws if DOMPurify is unavailable rather than
emitting unsanitised HTML.
Equivalent to data-render on a server-rendered element, but as a self-contained element you
drop in directly.

Usage

Put markdown (or plain text) as the element's text. Escape any literal HTML you do not want
treated as live markup:

<dp-content>
# Hello
Visit **DevPlace** :rocket: and watch https://youtu.be/dQw4w9WgXcQ
</dp-content>

Live example

## Markdown, rendered live This is **bold**, this is _italic_, and here is a shortcode :rocket: :fire:. - a list item - another with `inline code` - a mention of @alice_test and a link to https://example.com ```js const answer = 42; ```