# gds-rich-text

`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.

The wrapped content will render inside the shadowRoot of the `gds-rich-text` element, thereby applying the
default typography styles and standard element styles defined in the Green Design System.

**Class**: `GdsRichText`

**Tag**: `<gds-rich-text>`


## Properties

> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `captureMode` | `'clone' \| 'move'` | `-` | Capture mode for the content.  - `clone` (default): Clones the content to the shadowRoot.\\   This is the default and most compatible behaviour, since it leaves the original DOM untouched.   the downside is that events added through `addEventListener` will not be retained in the cloned DOM.  - `move`: Moves the content to the inner shadowRoot.\\   This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event   listeners, intact.   This mode is less compatible with some libraries that rely on the original DOM structure, for example React |
| `innerHTML` | `string` | `-` | Forwards innerHTML from the inner shadowRoot. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Methods

### `querySelectorAll(selector: string): NodeList`

Forwards the selector to the corresponding function on the inner shadowRoot.

**Parameters:**

- `selector`: `string`

### `querySelector(selector: string): Element | null`

Forwards the selector to the corresponding function on the inner shadowRoot.

**Parameters:**

- `selector`: `string`