# ScreenComponentElement

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

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

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

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

**elementSummary** The `<pc-screen>` element gives its entity a 2D space — in screen space or in the
world — that a hierarchy of `<pc-element>` descendants lays out inside. Must be a child of a
`<pc-entity>`, `<pc-model>` or `<pc-node>`.

## Accessors

### component

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

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

### priority

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

Gets the order in which the screen is drawn relative to other screens in the same layer, from
0 to 127, with higher values drawn on top and receiving input first.

### referenceResolution

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

Gets the resolution the screen's layout was designed for, as a width and height in pixels.

### resolution

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

Gets the width and height of the screen in pixels, which a screen-space screen overrides with
the canvas size.

### scaleBlend

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

Gets how the canvas's width and height are weighted against each other.

### scaleMode

```ts
get scaleMode(): "none" | "blend"
set scaleMode(value: "none" | "blend")
```

Gets how the screen scales its contents.

### screenSpace

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

Gets whether the screen renders its `<pc-element>` descendants in screen space rather than in
the world.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { priority: number; referenceResolution: Vec2; resolution: Vec2; scaleBlend: number; scaleMode: string; screenSpace: boolean }
```

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** `{ priority: number; referenceResolution: Vec2; resolution: Vec2; scaleBlend: number; scaleMode: string; screenSpace: boolean }`: The initial component data.

## 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`
- `protected initComponent(): void`
- `ready(): Promise<ScreenComponentElement>`