Temml Custom Element

> A Custom element wrapper around [Temml][temml]

This library provides two custom elements and
to include LaTeX expressions in your HTML document
but display the math equation.

Install

``bash
npm install --save temml temml-custom-element
`

You may also want to download a math font.

Usage

`js
import "temml-custom-element";
`


`html

\def\E{\mathbb{E}}
\newcommand\d[0]{\operatorname{d}\!}



\E[X] = \int_{-\infty}^{\infty} xf(x) \d{x}

`

If you want to register the custom elements under different names the
classes are available as seperate modules:

`js
import LaTexElement from "temml-custom-element/la-tex-element.js";
import LaTexPreampleElement from "temml-custom-element/la-tex-preample-element.js";

customElements.define("temml-math", LaTexElement);
customElements.define("temml-preample", LaTexPreampleElement);
`

$3

Download (or link to) the module assets. Note that if you are using
the unbundled module you have to add temml as a peer dependency in the
import map (under scopes in the example below). If you are using the
bundled module you can omit the scopes below.

Replace /path/to with the location of the modules.

`html


\sin \theta
`

Elements

$3

parses its own text content and renders it to a
[MathML][mathml] markup which the browser understands and will display
the equation.

#### Slots

- default: The LaTeX expression.

#### Attributes and properties

All available [options][temml#options] to temml.render are reflected
as both properties and attributes except displayMode, errorColor
and xml, with the additional:

- display: Either block or inline (defaults to inline). Pass
block if you want to render with displayMode: true.
- macros: Just the string persist (defaults to nothing). Pass
persist if you want to either:
- Use macros defined in or with \gdef
- Define a new macro with \gdef to be used by other
instances.
- trust is a boolean attribute or a function property reflecting
the same temml option.

#### CSS Shadow Parts

- math: The rendered $$ element in the output.
- error: The error text if the LaTeX expression fails to parse.

#### CSS Custom Properties

- --la-tex-error-color: The color of error text (both failed
commands and ::part(error)). Same as the errorColor option to temml
render.

$3

An invissible element that won’t render any content. Used to define
macros and colors for la-tex elements with macros="persist">.

#### Slots

- default: The macro definitions to be used in `
elements.

[temml]: https://temml.org/
[temml#options]: https://temml.org/docs/en/administration#options
[mathml]: https://developer.mozilla.org/en-US/docs/Web/MathML