# 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

| 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. |


## 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`
