# ElementComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<ElementComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/components/element-component.ts#L40

The ElementComponentElement interface provides properties and methods for manipulating
[`<pc-element>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-element/) elements.
The ElementComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

Despite the name, this is not a base class or a generic wrapper: it is the engine's 2D UI
component, which gives its host entity a rectangle in a `<pc-screen>` hierarchy that draws
either an image, a line of text or nothing (`type="image"`, `"text"` or `"group"`). The tag
spells the engine component it adds, as every component element does.

Engine component: [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.html) (`element`).

**elementSummary** The `<pc-element>` element gives its entity a 2D UI rectangle inside a
`<pc-screen>` hierarchy, drawing an image, a line of text or nothing (`type="image"`, `"text"` or
`"group"`). Must be a child of a `<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### alignment

```ts
get alignment(): Vec2
set alignment(value: Vec2)
```

Gets the horizontal and vertical alignment of the text within the element.

### anchor

```ts
get anchor(): Vec4
set anchor(value: Vec4)
```

Gets the anchor of the element component.

### autoFitHeight

```ts
get autoFitHeight(): boolean
set autoFitHeight(value: boolean)
```

Gets whether a text element automatically reduces its font size to fit its height.

### autoFitWidth

```ts
get autoFitWidth(): boolean
set autoFitWidth(value: boolean)
```

Gets whether a text element automatically reduces its font size to fit its width.

### autoHeight

```ts
get autoHeight(): boolean
set autoHeight(value: boolean)
```

Gets whether the element component should automatically adjust its height.

### autoWidth

```ts
get autoWidth(): boolean
set autoWidth(value: boolean)
```

Gets whether the element component should automatically adjust its width.

### color

```ts
get color(): Color
set color(value: Color)
```

Gets the color of the element component.

### component

```ts
get component(): ElementComponent | null
```

Gets the underlying PlayCanvas element component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### enableMarkup

```ts
get enableMarkup(): boolean
set enableMarkup(value: boolean)
```

Gets whether the element component should use markup.

### fitMode

```ts
get fitMode(): FitMode
set fitMode(value: FitMode)
```

Gets how the texture or sprite fits the element's rectangle.

### fontAsset

```ts
get fontAsset(): string
set fontAsset(value: string)
```

Gets the id of the `pc-asset` to use for the font.

### fontSize

```ts
get fontSize(): number
set fontSize(value: number)
```

Gets the font size of the element component.

### height

```ts
get height(): number
set height(value: number)
```

Gets the height of the element component.

### justify

```ts
get justify(): boolean
set justify(value: boolean)
```

Gets whether wrapped lines are stretched flush with both edges of the element, which needs
`wrap-lines` and a fixed width.

### lineHeight

```ts
get lineHeight(): number
set lineHeight(value: number)
```

Gets the line height of the element component.

### margin

```ts
get margin(): Vec4 | null
set margin(value: Vec4 | null)
```

Gets the margin of the element component.

### mask

```ts
get mask(): boolean
set mask(value: boolean)
```

Gets whether the element component is a mask.

### maxFontSize

```ts
get maxFontSize(): number
set maxFontSize(value: number)
```

Gets the largest font size a text element may use when auto-fitting.

### maxLines

```ts
get maxLines(): number | null
set maxLines(value: number | null)
```

Gets the maximum number of lines `wrap-lines` wraps the text onto.

### minFontSize

```ts
get minFontSize(): number
set minFontSize(value: number)
```

Gets the smallest font size a text element may use when auto-fitting.

### opacity

```ts
get opacity(): number
set opacity(value: number)
```

Gets the opacity of the element component.

### outlineColor

```ts
get outlineColor(): Color
set outlineColor(value: Color)
```

Gets the color of the text outline, which is only drawn when `outline-thickness` is above 0.

### outlineThickness

```ts
get outlineThickness(): number
set outlineThickness(value: number)
```

Gets the thickness of the text outline.

### pivot

```ts
get pivot(): Vec2
set pivot(value: Vec2)
```

Gets the pivot of the element component.

### pixelsPerUnit

```ts
get pixelsPerUnit(): number | null
set pixelsPerUnit(value: number | null)
```

Gets the number of pixels per unit used when rendering a sprite.

### shadowColor

```ts
get shadowColor(): Color
set shadowColor(value: Color)
```

Gets the color of the text shadow, which is only drawn when `shadow-offset` is not `0 0`.

### shadowOffset

```ts
get shadowOffset(): Vec2
set shadowOffset(value: Vec2)
```

Gets the offset of the text shadow.

### spacing

```ts
get spacing(): number
set spacing(value: number)
```

Gets the spacing between the letters of the text.

### spriteAsset

```ts
get spriteAsset(): string
set spriteAsset(value: string)
```

Gets the id of the `pc-asset` to use for the sprite.

### spriteFrame

```ts
get spriteFrame(): number
set spriteFrame(value: number)
```

Gets the frame of the sprite to render.

### text

```ts
get text(): string
set text(value: string)
```

Gets the text of the element component.

### textureAsset

```ts
get textureAsset(): string
set textureAsset(value: string)
```

Gets the id of the `pc-asset` to use for the texture.

### type

```ts
get type(): "text" | "image" | "group"
set type(value: "text" | "image" | "group")
```

Gets the type of the element component.

### useInput

```ts
get useInput(): boolean
set useInput(value: boolean)
```

Gets whether the element component accepts input events.

### width

```ts
get width(): number
set width(value: number)
```

Gets the width of the element component.

### wrapLines

```ts
get wrapLines(): boolean
set wrapLines(value: boolean)
```

Gets whether the element component should wrap lines.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): Record<string, any>
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `Record<string, any>`: The initial component data.

### initComponent

```ts
protected initComponent(): void
```

Configures the newly added component. Overridden by subclasses whose setup goes beyond
the initial data — child-element handling, asset resolution and the like.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `ready(): Promise<ElementComponentElement>`